[공부] 노마드 코더 React 5회차(完)

크롤링하여 영화 사이트 완성!

✨ 느낀 점

👍 알게 된 점

영화API 크롤링하기

const getMovies = async() => {
	const json = await (
    await fetch( `url주소` )
    ).json();
}

위의 코드로 url주소에 있는 데이터를 json이라는 변수에 넣었다. json을 콘솔창에 띄우면 data안에 내가 찾고자 하는 movies 가 있다. 찾는 방법은 다음과 같다.

 

const [movies, setMovies] = useState([]);
.
.
.
.
setMovies(json.data.movies);

json에서 data키값안에 movies키값을 전부 movies에 넣게 되었다.

 

map함수로 빼낸 데이터 중, 값이 있는것만 선별하기

hasOwnProperty함수, 삼중연산자를 사용하거나, 비트연산자를 사용하면 된다.

내가 찾는 genres의 데이터가 없으면 에러가 뜨는 것이었다. 그래서 genres의 데이터가 있을경우에만 영화를 표현하는 방법을 알아보았다. 첫번째는 genres의 데이터가 있는경우에만 선별하는 방법은 hasOwnProperty함수를 사용하면 된다. hasOwnProperty함수의 매개변수로 내가 찾는 데이터의 값을 넣어주면 된다. 두번째는 더 쉬운방법인데 삼중연산자 대신 비트연산자를 사용하여 genres값이 있을경우에는 1, 없으면 0이 표시가 되고, &&로 인해 0이면 실행이 안되고 1이면 실행되게 만들었다.

 

PropTypes를 이용해 미리 오류 잡기

PropTypes를 사용하려면 터미널로 prop-types를 설치해야한다.

npm install -save prop-types

PropTypes는 크롤링할 데이터의 타입을 미리 정하게 해주어, 만약 해당 타입이 아닐경우 사용자가 정한 타입이 아니라고 알려준다. 특이한점은 콘솔창에 오류라고 나타나도, 화면에는 정상적으로 표시가 된다는 점이다.

 

BrowserRouter를 이용해 사이트 이동하기

해당 기능을 사용하려면 우선 터미널로 설치를 받아야한다.

npm install react-router-dom

 

설치가 완료되었으면 import해야한다.

import {BrowserRouter as Router, Routers, Route} from 'react-router-dom';

BrowerRouter as Router의 뜻은 BrowerRouter를 호출하는데, Router라는 이름으로 이용하겠다! 라고 정한것이다.

 

사이트를 사용하려면 틀을 지켜야하는데, 틀은 다음과 같다.

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

만약, BrowerRouter as Router라고 하지않았으면 Router를 BrowerRouter로 바꾸기만하면된다. 

 

중요★ 새로고침없이 해당사이트로 이동하기

<Link to> 태그를 사용하자

HTML에서 배운 내용 중에서 문자에 링크를 다는 방법은 <a href> 태그를 사용하는 것이다. React에서도 <a>태그를 사용해도 되지만, 링크를 클릭하면 새로고침이 되기때문에 최적화를 중점으로 둔 React에 사용하기에는 부적합하다. 그래서 Link to 태그를 사용한다. 사용법은 간단하다. <a href>대신 <Link to>태그를 사용하면된다. 그리고 Link를 import해야한다.

import { Link } from "react-router-dom";

 

영화 id값에 따른 웹사이트 이동시키기

1. Route 경로를 path='/movie/:id'로 바꾼다.

여기서 :id가 아니라 id를 쓸경우, id가 변수로 작동되지 않아 movie/id로 이동시킨다. 꼭 :id로 적자

영화 링크를 클릭한경우 url에 영화의 id값 표시하기

 

2. props로 id값 넘기기

 

 

3. props받은 id값을 Link to에 넣어준다.

 

4. url에 있는 id값 추출하여 해당 id를 가진 데이터 크롤링하기

우선 useParams를 import한다.

import { useParams } from "react-router-dom";

useParams는 url의 id값(변수)을 가져올 수 있다. {id}라는 변수를 사용해 온전히 숫자만 받아 올 수 있다.

다음으로 받은 id값에 해당하는 영화의 데이터를 받아오는 json작업을 한다.

마지막으로 받은 영화의 데이터를 가지고 해당 홈페이지를 꾸민다!