17일차

17일차는 16일차에 이어서 영화 웹을 만들었다. 지난 번에는 API를 통해서 영화 목록을 가져왔다면, 오늘은 영화 id를 통해서 영화를 가져와서 상세 페이지를 꾸미는 작업을 했다.

똑같이 API를 활용했고, 전체 코드는 아래의 링크에 있다.

git: https://github.com/leeyulgok/React-BootCamp-Team2/tree/yulgok

영화 웹

결과 이미지

1. 메인페이지
   

메인페이지는 포스터만 가져왔다.이렇게만 해도 약간의 넷플릭스 느낌을 줄 수 있다는 생각이 들었다. 그래서 마우스를 올리면

두 번째 사진처럼 살짝 이미지가 띄워지고, 투명한 느낌을 주었다.

2. 상세페이지
   

상세페이지는 왼쪽에 영화 포스터를 띄우고, 영화 상세 정보를 가져왔다.

코드

const Detail = () => {
  const [movie, setMovie] = useState({});

  const { id } = useParams();

  const getMovie = async () => {
    const json = await (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    ).json();

    setMovie(json.data.movie);
    console.log(json);
  };

  useEffect(() => {
    getMovie();
  }, []);

  return (
    <div className={styles["detail-container"]}>
      <div className={styles["moive-img"]}>
        <img src={movie.large_cover_image} alt="movie_cover" />
      </div>
      <div className={styles["movie-des"]}>
        <h1>
          {movie.title}({movie.year})
        </h1>
        <ul>Genres : {movie.genres && movie.genres.map((g) => <li key={g}>{g}</li>)}</ul>
        <small>runtime : {movie.runtime}</small>
        <p>{movie.description_intro}</p>
      </div>
    </div>
  );
};

export default Detail;

상세페이지의 코드는 위와 같다. 크게 3등분으로 볼 수 있는데 첫 번째는 useParams, 두 번째는 getMovie(), 마지막은 useEffect다.

useParams는 경로의 매개변수를 객체로 가져와서 사용할 수 있게 해주는 함수인데, 이 덕분에 쉽게 id를 가져와서 id로 API를 가져올 수 있었다.

가져온 id로 getMovie 비동기함수를 만들어 API에 연결했다. 비동기는 하나의 일을 마치고 나서 다른 일을 하게 하는 것을 말한다. 코드로 보면 fetch를 연결하고 json 파일을 가져온 후 getMovie함수를 불러온다. 비동기를 설정하지 않았더라면, useEffect 함수가 제대로 실행 안됐을 것이다.

그래서 getMovie함수를 통해 영화 id에 관한 json 데이터를 가져와 setMovie 변수에 넣었다.

마지막으로 useEffect는, getMovie함수가 연결되었을 때 데이터를 가져오도록 했다.

나머지는 화면에 랜더링하는 작업이다.

정리하기

이번 실습을 통해 지난 번까지 배운 내용을 한 번에 복습할 수 있는 좋은 시간이었다.

라우터, useState, useEffect, useParams, useNavigete 등의 훅 함수를 배우는데 도움이 되었다. 하나하나 어떨 때 사용하는지 외우는 것보다 직접해봄으로써 어떨 때 필요한 지 배우는 게 더 도움이 된다 생각한다.

그러니 스스로 다른 것들을 만들어 보면서 React를 익혀 가도록 하자.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프