항해 사전준비 8일차 - React.js/ React Router/ Github io

React.js 로 toDo

import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';

function App() {
  // toDo를 입력받을 state
  const [toDo, setToDo] = useState();

  // 모든 toDo를 array로 관리할 state
  const [toDos, setToDos] = useState([]);

  // toDo 입력받기
  const onChange = (event) => {
    setToDo(event.target.value);
  }

  // Form태그 Submit
  const onSubmit = (event) => {
    event.preventDefault();
    if(toDo === ""){
      return;
    }
    // 처음엔 currentArray가 비어있다. 거기에 todo를 넣어주고, ...currentArray는 이 currentArray의 끝까지의 데이터들이 들어간다. 
    setToDos(currentArray=>[toDo, ...currentArray]);

    // input창 비워주기
    setToDo("");
  }
  //console.log(toDos)
  return (
    <div >
      <form onSubmit={onSubmit}>
        <input 
          value={toDo} 
          onChange={onChange} 
          type="text" 
          placeholder='Write your to do' 
        />
        <button>Add to Do</button>
      </form>
      <hr></hr>
        <ul>
        {/*map은 배열 안에 함수를 넣을 수 있도록 해준다. 
        첫번째 파라미터가 배열안의 값들에 각각 접근이 가능하다. 
        ['a', 'b', 'c'].map(("hello")=>{}); 
        결과: ['hello', 'hello', 'hello']*/}
        {toDos.map((item, index)=><li key={index}>{item}</li>)}
        </ul>
    </div>
  );
}

export default App;

 

코인 trakcer

import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';

function App() {
  // 처음시작할때 코인정보가 나오기 전에는 loading...을 보여줄거라서 true
  const [loading, setLoading] = useState(true);

  // 코인들을 관리할 배열
  const [coins, setCoins] = useState([]);

  // input 값 받은거 관리
  const [answer,setAnswer] = useState();
  const onChange = (event) => {
    setAnswer(event.target.value);
  }

  // form 태그 submit 관리
  const onSubmit = (event) =>{
    event.preventDefault();
    if(answer == ""){
      return
    }
  }

  // useEffect() - 처음 한번만 call 하고 싶을때: API같은거 가져올때 좋다.
  useEffect(() =>{
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then(response => response.json()) // response를 받아와서 json 타입으로
      .then((data)=>{ // json 타입으로 받은걸 data라는 변수에 넣고 
        setCoins(data); // coin 배열에 data를 넣어주고
        setLoading(false); // 로딩중이 아니니까 로딩은 false로 변경
      }); 
  }, [])
  console.log(answer)
  return (
    <div >
      <h1>The Coins - TOTAL COINS INFO: {loading ? null : coins.length}</h1>
      
      <h3>How much do you have? (USD)</h3>
      <form onSubmit={onSubmit}>
        <input 
          type="number"
          onChange={onChange}
          value={answer}
          placeholder="Numbers only" 
        />
      </form>
      {loading ? <strong>Loading...</strong> :<select>
                                                {coins.map((coin)=>
                                                  <option>
                                                    {coin.name} - {coin.symbol}: ${coin.quotes.USD.price} USD/Coin - You can buy {answer / coin.quotes.USD.price} 
                                                  </option>)}
                                              </select>}
    </div>
  );
}

export default App;

리액트 라우터 설치 - 여러페이지 이용을 쉽게

 npm install react-router-dom

지금은 React Router 5.3버젼으로 공부중이다.

import './App.css';
import {
  BrowserRouter as Router, // 해시라우터랑 다르게 #를 추가 안해도 된다.
  Switch, // 지금은 사라짐
  Route, // 라우트
  Link, // 새로고침 없이 유저를 다른페이지로 이동시켜준다
  } from "react-router-dom";

import Home from './routes/Home';
import Detail from './routes/Detail';

function App() {
  return  <Router>
            <Switch>
              <Route path="/movie">
                <Detail />
              </Route>
              <Route path="/">
                <Home />
              </Route>
            </Switch>
          </Router>
  }

export default App;

github io에 업로드

1. package.json을 연다

2. 제일 아래에 아래와 같이 작성한다.

"homepage": "https://내깃헙username.github.io/내repository이름"

3. 일일이 빌드하고, gh-pages를 설치하기 귀찮으니까 script로 관리한다.

4. 아래와 같이 package.json의 script부분에 작성한다.

    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"

5. 터미널에 npm run deploy라고 명령어를 하면 build하고, github에 접근하고 홈페이지가 publish 된다.

6. 수정사항이 있으면 build폴더를 날리고 다시 npm run deloy 명령어를 친다.