[ReactJS로 영화 웹 서비스 만들기] Section 5

절대 state를 직접적으로 수정하지 않고 항상 수정하는 함수를 사용한다

 

food = [1, 2, 3, 4]
[6, ...food]
> [6, 1, 2, 3, 4]

setToDos((currentArray) => [toDo, ...currentArray]);

 

수정하는 함수를 사용할 때 2가지 옵션이 있다

하나는 setToDo("") 이런 식으로 이 값은 우리가 저장한 데이터를 가지고 있다

다른 하나는 함수를 보내는 방법

 

map()은 괄호 안에 함수를 넣을 수 있는데 이 함수는 array의 모든 item에 대해 실행될 것이다

거기서 무엇을 return하던지 간에 그 return 한 값이 새로운 array에 들어가 있게 될 것이다

 

map은 함수의 첫번째 인자가 진행되고 있는 순서에 맞는 item이다

<ul>
   {toDos.map((item, index) => (<li key={index}>{item}</li>))}
</ul>

 

const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);

하나의 함수에서는 loading의 state를 변환하고 다른 하나에서는 coins의 state를 바꿔주었다

 

useEffect(() => {
    fetch(`
    https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`)
    .then(((response) => response.json).then((json) => console.log(json)));
  }, []);

response를 받아오고 받아온 response에서 json 파일을 얻게 된다

그리고 그 json을 받아와 확인해 보기 위해 console.log() 사용

const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
    )
      .then((response) => response.json())
      .then((json) => {
        setMovies(json.data.movies);
        setLoading(false);
      });
  }, []);

여기서 로딩을 끝내줬기 때문에 setLoading(false)를 꼭 적어줘야 한다

요즘에는 then 대신 async-await 을 사용한다

const getMovies = async () => {
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
    );
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);

const getMovies = async () => {
    const json = await (
      await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };

이렇게 짧은 버전으로도 가능

 

 {movies.map((movie) => (
   <div key={movie.id}>{movie.title}</div>
))}

{movies.map((movie) => (
            <div key={movie.id}>
              <h2>{movie.title}</h2>
              <p>{movie.summary}</p>
              <ul>
                {movie.genres.map((g) => (
                  <li key={g}>{g}</li>
                ))}
              </ul>
            </div>
          ))}

<img src={movie.medium_cover_image} />

이미지 넣기도 가능

 

key는 React.js에서만 map안에서 component들을 render 할 때 사용

 

React Router가 하는 것은 페이지 전환

npm install react-router-dom

Router는 URL을 보고있는 component이고 router는 우리에게 Home component를 보여주게 된다

 

Routes의 역할은 Route를 찾는 건데 Route는 url을 의미한다(localhost:3000/여기)

Route를 찾으면 컴포넌트 렌더링

<Router>
  <Routes>
    <Route path="/movie" element={<Detail />} />
    <Route path="/" element={<Home />} />
  </Routes>
</Router>

React Router에서는 원한다면 두 개의 Route를 한 번에 렌더링 가능

 

Link는 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트

<h2>
   <Link to="/movie">{title}</Link>{" "}
</h2>

 

React Router는 다이나믹(동적) url을 지원해 준다

다이내믹하다는 건 url에 변수를 넣을 수 있다는 의미

<Route path="/movie/:id"

이런 식으로 적는데  : 를 적어주는 게 중요!

<Link to={`/movie/${id}`}>{title}</Link>

 

 

url이 받는 변수값이 뭔지 확인하려면 useParams 사용

React Router에 url이 변수를 받을 거라고 말해주기만 하면 된다

const {id} = useParams();

 

Breaking chage는 버전을 업데이트하면서 코드가 깨져서 코드를 수정해야 하는 경우를 말한다