React #Movie App part_1

movie app 프로젝트 시작

---

✅ Create 'Main Page'

json 으로 data 추출하기

• 사용할 Movie API
  • https://yts.mx/api/v2/list_movies.json?minimum_rating=9.0&sort_by=year
  • 별점 9.0 이상, 연도별로 정렬하여 불러오기
    

function App() {
  const [] = useState();
  const [loading, setLoading] = useState(ture);
  useEffect(() => {
  	fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=9.0&sort_by=year`)
      .then((response)=>response.json())
      .then((json) => console.log(json));
  },[]);
  return (
	<div>
      {loading ? <h1>Loading...</h2> : null}
    </div>
  )
}

• 위와같이 작성 시 movies가 담긴 Obj 을 콘솔에서 확인할 수 있다.
  

function App() {
  const [movies, setMovies] = useState([]);     <<<----
  const [loading, setLoading] = useState(ture);
  useEffect(() => {
  	fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=9.0&sort_by=year`)
      .then((response)=> response.json())
      .then((json) => {
      	setMovies(json.data.movies);     <<<----
        setLoading(false);
      }); 
  },[]);
  return (
	<div>
      {loading ? <h1>Loading...</h2> : null}
    </div>
  )
}

• json.data.movies 을 담을 movies state 를 만들고,
  setMovies 로 값을 넣어줬다.
• then() 대신 유투브 클론코딩을 만들었을 때 사용한 async-await을 사용해주자

function App() {
  const [movies, setMovies] = useState([]); 
  const [loading, setLoading] = useState(ture);
  const getMovies = async() => {     <<<----
  	const json = await (     <<<----
      awiat fetch( 
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9.0&sort_by=year`
      )).json();
      setMovies(json.data.movies);
      setLoading(false);
  };
  
  useEffect(() => {
  	getMovies();     <<<----
  },[]);
  return (
	<div>
      {loading ? <h1>Loading...</h2> : null}
    </div>
  )
};

• await 을 감싸는 또 다른 await
• 위의 json 추출 방법은 아래의 코드를 더 줄여서 작성한 것!

const getMovies = async ) => {
  const response = await fetch (`...`);
  const json = await response.json();
  setMovies(json.data.movies);
  setLoaidng(false);

• 이제 movies obj에 있는 내용을 화면에 보이도록 하자.
• 전에 했던 것 처럼 map() 함수를 사용하면 된다.

return (
  <div>
  	{loading ? ( <h1>Loading...</h1> ) : (
      <div>
      	{movies.map((movie) => 
          <div key={movie.id}> 
          // 모든 영화들이 가지고 있는 고유 'id'
            <img src={movie.medium_cover_image} />
          	<h2>{movie.title}</h2>
            <p>{movie.summary}</p>
			<ul>
              {movie.genres.map((g) => 
              	<li key={g}>{g}</li>
                // movie.genres 가 obj 형식이므로 또 map을 사용
                // key 의 경우, ID 등 어떠한 고유값이 없어
                // key 값에 g를 줌
            </ul>
          </div>
         )
	  </div>
  </div>;
)

• ok goood

✅ react-router-dom (v6.4.2)

• 강의는 v5.3.0 버전으로 진행됬지만, 최신 버전으로 하는게 더 낫겠다 싶어 최신 버전으로 설치

• 설치 npm i react-router-dom
  

• 사용하기 전 import

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './routes/Home';
import Detail from './components/Detail';

function App()

• v5와 v6의 차이
  • Switch 의 네이밍이 Routes로 변경
  • exact 옵션 삭제
  • component 방식 변경 (Route컴포넌트 사이에 자식 컴포넌트를 넣지 않고,
    element prop에 자식 컴포넌트를 할당하도록 바뀜)
  • path 를 기존의 path="/Web/:id" 에서 path=":id" 로, 상대경로로 지정
• 사용

// -App.js
improt Home from "./routes/Home";

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

• Router : route를 찾고(ex-localhost:3000/movies/123),
  route를 찾으면 컴포넌트를 렌더링 시켜준다.
• App 컴포넌트에 만들었던 모든 로직들을 별개의 컴포넌트로 분리
  메인페이지 : <Home /> + <Movie />
• route에서 route로 이동하는 방법은?

- Link 컴포넌트

• 브라우저 새로고침 없이도 유저를 페이지에서 다른 페이지로 이동시켜주는 컴포넌트
• 사용방법 <Link to="이동할 주소">Home</Link>

// - Movie.js 컴포넌트

function Movie({ 
  id, 
  coverImg, 
  title, 
  year, 
  rating, 
  genres, 
  runtime }) {
  // Movie 컴포넌트의 부모 컴포넌트인 Home 에서 받아온 props
  return (
    <div className="header">
      <img src={coverImg} alt={title} />
      <div className="title-warp">
        <div className="title">
          <Link to={`/movie/${id}`}>    <<<----
            {title} ({year})
          </Link>
        </div>
        ...
} // end Movie

Movie.propTypes = {
  id: PropTypes.number.isRequired,
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  year: PropTypes.number.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
  rating: PropTypes.number,
  runtime: PropTypes.number,
};

• React Router 는 다이나믹(동적) URL 을 지원해준다.
• 즉, URL 에 변수를 넣을 수 있다는 것
• 영화 data 마다 고유하게 가지고 있던 id 를 변수로 부여해
  유저를 "/movie/변수"의 경로로 보낼 수 있게 되었다!
• 꼭 id 앞에 : 넣어주기

✅ Create 'Movie Deatail Page'

• 목표: 메인 페이지에서 영화 제목을 클릭하면 디테일 페이지로 넘어가게하기
  디테일페이지 주소(https://yts.mx/api/v2/movie_details.json?movie_id=36252 등등..)
• 그러기 위해 Url에 있는 값을 반환해주는 React Router 훅을 사용해
  영화마다 갖고있던 고유한 ID 값(id=36252)을 가져오면 된다.
  (<Link to={'/movie/${id}'}> 의 ${id})

- useParams()

• 리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용할 수 있는 훅
• 사용 방법
  • useParams 를 import 한다.
  • useParams 정보를 하나의 변수에 저장한다!
  • 파라미터 값을 사용한다.

function Detail() {
  const { id } = useParams();
  // → url 에 있는 변수의 값을 가져온다. /:{변수}
  // 이름은 변수에 지정한 값으로 설정됨
  // 즉, <Link to={'/movie/${id}'}>에서 설정했던 변수명을 사용
}

• 올ㅋ 쉽당
• 이제 받은 id 를 가지고 api 에 요청만 보냄 된당.

function Detail() {
  const { id } = useParams();
  const getMovies = async () => {
  const json = await (
    await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
  ).json();
  setDetail(json.data.movie);
  setLoading(false);
};

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

• 완성!!!!!!!!!!!!!!!!!!!!!!
• 마지막 단계는 코드 챌린지!!!!
• 다음편에 계속....

---

• react-router-dom v6 참고 글 : https://velog.io/@soryeongk/ReactRouterDomV6