리엑트 강의 내용 정리2

useEffect

코드가 한번만 실행될 수 있도록 한다

import React, { useEffect } from "react";
import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
  //[]안의 값이 업데이트 될 때 실행된다
  useEffect(() => {
    console.log("I run only once");
  }, []);
  useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]);
  useEffect(() => {
    console.log("I run when 'counet' changes");
  }, [counter]);
  useEffect(() => {
    console.log("I run when 'keword' & 'counter' changes");
  }, [keyword, counter]);
  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("SEARCH FOR", keyword);
    }
  }, [keyword]);
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

cleanup

function Hello() {
  useEffect(function () {
    console.log("hi :)");
    return function () {
      console.log("bye");
    };
  }, []);
  useEffect(() => {
    console.log("hi :)");
    return () => console.log("bye :(");
  }, []);
  return <h1>Hello</h1>;
}
function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);
  return (
    <div>
      {/*showing이 true경우 Hello컴포넌트 보여주고 false일 경우 null */}
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}
export default App;

ToDo list

import React, { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    //currentArray의 element를 가져와서 새로운 array를 만들기 위해 ...작성
    //작성했던 todo와 새로 작성한 todo를 합쳐서 array를 생성해준다
    setToDos((currentArray) => [toDo, ...currentArray]);
    setToDo("");
  };
  console.log(toDos);
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your to do..."
        />
        <button>Add To Do</button>
      </form>
      <hr />
      //toDos array를 가져와 각 todo를 의미하는 이름 설정(item)해주고 key값을 입력하기 위해 index를 추가한다
      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

Coin Tracker

import React, { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    //then response를 받아서 reponse.json을 return해준다
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        // .then((json) => console.log(json));
        // useState추가 후 setCoins json설정
        setCoins(json);
        //setLodaing을 false로 변경해서 loading텍스트가 안 보이게 한다
        setLoading(false);
      });
  }, []);
  return (
    <div>
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {/*로딩이 아닐 경우 표시해준다 */}
      {loading ? (
        <strong>Loading...</strong>
      ) : (
        <select>
          {coins.map((coin, id) => (
            <option key={id}>
              {coin.name} ({coin.symbol}): ${coin.quotes.USD.price} USD
            </option>
          ))}
        </select>
      )}
    </div>
  );
}

Movie App

import React, { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  //기본값을 빈 배열로 설정해준다
  const [movies, setMovies] = useState([]);
  //async-await사용법 좀 더 보편적으로 사용됨
  //getMovies라는 함수생성 async함수가 됨
  //useEffect를 이용해 getMovies호출
  //then을 사용하는 대신에 const response...
  //json 가져와서 await response.json
  //이게 더 보기 좋다고함,
  //밑 버전의 짧은 버전 useEffect부분은 같음
  const getMovies = async () => {
    const json = await (
      await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);

  // const getMovies = async () => {
  //   const response = await fetch(
  //     `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`
  //   );
  //   const json = await response.json();
  //   setMovies(json.data.movies);
  //   setLoading(false);
  // };
  // useEffect(() => {
  //   getMovies();
  // }, []);
  //일반적 fetch사용
  // useEffect(() => {
  //   //평점이 8.5이상인 영화 url
  //   fetch(
  //     `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`
  //   )
  //     //response를 받아와서 response.json을 return해주고 json을 가져와서 콘솔로 출력
  //     .then((response) => response.json())
  //     // .then((json) => console.log(json));
  //     //console확인후 data있는 부분
  //     .then((json) => {
  //       setMovies(json.data.movies);
  //       //로딩을 끝냈기 때문에 false로 바꿔준다
  //       setLoading(false);
  //     });
  // }, []);
  //movies를 console출력해보면 data를 받아온것을 확인할 수 있다
  // console.log(movies);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <div key={movie.id}>
              <img src={movie.medium_cover_image} />
              <h2>{movie.title}</h2>
              <p>{movie.summary}</p>
              {/*array를 가져올 경우 map을 써준다 g는 사용자설정이름이다 각 genres를 뜻한다 첫번재 argument
              key값에 g는 고유값이기 때문에 써줄 수 있다
              */}
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

react-router-dom

npm install react-router-dom 설치

페이지 이동

import React, { useEffect, useState } from "react";
import Movie from "./components/Movie";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/movie" element={<Detail />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

깃헙 페이지

설치

npm i gh-pages

build-코드를 압축하고 최적화 npm build로 실행시킬 수 있다

npm build로 실행시킨 후 build폴더가 생성되면 그걸 github pages에 push한다

push하기 전 package.json에서 

마지막 부분에 homepage" :https:유저이름.github.io/폴더이름 적어준다

scripts부분

추가로 작성해준다 predeploy는 deply실행 전에 먼저 실행된다 npm run deploy하면 predeply가 먼저 실행되어

npm run build를 실행하게 된다 그리고 react-script 실행 후 다 끝나면 deploy가 실행된다

deploy는 homepage부분에 적어놓은 웹사이트에 업로드한다