React_netflix-clone_4

 

4. netflix-clone_1

: React Router Dom

 

react router dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다.

라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍쳐와 달리 react router dom은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다.

 

 

리액트는 SPA(single page application)이기 때문에 하나의 index.html 템플릿 파일을 가지고 있다.

여기서 자바스크립트를 이용해 다른 컴포넌트들을 이 index.html 템플릿에 넣음으로써 페이지를 변경해주게 된다.

이때 react router dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 주게 되는 것이다.

 

 

우선 react router dom을 설치하고 이를 이용하려면 index.js에서 

 

이렇게 기존 React.StrictMode 태그가 아닌 BrowserRouter 태그를 이용해서 루트 컴포넌트를 감싸줘야 한다.

 

여기서 루트 컴포넌트는 App.js이다.

 

BrowserRouter는 UI와 URL을 동기화된 상태로 유지해주는 역할을 한다.

 

 

그리고 여러 컴포넌트를 생성하고 라우트를 정의하게 되는데 이때 Routes 와 Route 태그를 사용한다.

 

큰 Routes 태그로 개별 Route 태그들을 감싸주는데..

Routes는 앱에서 생성될 모든 개발 경로에 대한 컨테이너/상위 역할을 한다.

 

Route는 단일 경로를 만드는데 사용되고 두 가지 속성을 취한다.

먼저 path는 원하는 컴포넌트의 Url 경로를 지정한다. 경로 이름이 / (백슬래시)인 컴포넌트는 앱이 처음 로드될 때마다 먼저 렌더링된다.

다음으로 element는 경로에 맞게 렌더링 되어야 하는 컴포넌트를 지정한다.

 

예를 들면

이런 식이다.

 

 

 

 

그리고 <Link />를 통해 경로를 이동할  수 있다.

 

이렇게 Link 태그를 이용하여 to 속성을 통해 링크가 사용자를 데려가는 경로를 지정해준다.

 

 

---

 

 

4. netflix-clone_2

: React Router Dom APIs

 

중첩 라우팅(nested routes)은 react router의 가장 강력한 기능 중 하나이므로 복잡한 레이아웃 코드를 어지럽힐 필요가 없다. 대부분의 레이아웃은 url의 세그먼트에 연결되며 react router는 이를 완전히 수용한다.

 

예를 들면

 

이런 식으로 route 태그를 중첩시켜 사용하면 app 컴포넌트가 보이면서 home 컴포넌트가 보이는(index를 써줘서..) .. 이런 식이다.

 

 

또한 자식 경로 요소를 렌더링하려면 부모 경로 요소에서 Outlet 태그를 사용해야 한다.

 

즉 위의 예시에 이어

이렇게 App 컴포넌트 내에서 Outlet 태그를 써주는 것이다. 그러면 App 컴포넌트 내부에 작성한 요소들을 자식 컴포넌트에서도 보여줄 수 있다.

 

 

이외에

useNavigate : 경로를 바꿔준다.

useParams : :style 문법을 경로에 사용하였다면 usePararms()로 읽을 수 있다.

useLocation : 이 hooks는 현재 위치 객체를 반환한다 이것은 현재 위치가 변경될 때마다 일부 side effect를 수행하려는 경우에 유용할 수 있다.

 

이것들은 실제 넷플릭스 앱에 적용시키면서 자세하게 알아보자..!

 

 

---

 

 

4. netflix-clone_2

: Netflix 앱에 React Router Dom 적용하기

 

 

돔 설치!!

 

react router dom을 이용해서 구현할 부분은 검색 페이지와 디테일 페이지다.

 

 

우선 src 폴더 내부에

이렇게 폴더들과 index.js 들을 만들어줬다.

 

 

이제 App.js를 라우팅을 위한 파일로 변경해줘야 한다.

현재 App.js가 메인 페이지를 위한 컴포넌트로 이뤄져 있으므로 이 부분을 다 MainPage의 index.js로 옮겨준다.(import 부분의 경로도 모두 변경 해야 함!! 주의!!

 

 

우선 App.js에서 Layout을 만들어 주고 App 함수를 수정했다.

 

 

흠흠 우선 Layout은 세 개의 페이지 상위에 있다. 여기서는 모든 페이지에 공통적으로 들어갈 Nav와 Footer가 있고 중간에 Outlet이 있다.

Outlet에는 세 개의 페이지가 들어갈 예정!!

 

DetailPage에는 경로 path를 movieId로 줬다. 이는 검색을 하고 검색 결과에 있는 영화를 선택했을 때 나타나는 페이지의 상세 주소가 되겠지

SearchPage에는 경로를 search로...

 

 

 

그리고 까먹지 말고 해야할 index.js 파일에서 BrowserRouter로 감싸주기!!

 

이렇게~~

 

 

이제 Mainpage의 index.js를 수정해보자... 프아..

이렇게 import 해오는 부분 주의해서 가져오고

 

 

함수 내부는 App.js 에서 가져올 때 Nav와 Footer 만 빼고 복붙!!

 

 

후움하..~

 

 

---

 

4. netflix-clone_3

: useLocation을 이용한 검색 페이지 구현하기

 

 

구현하고자 하는 검색창은 네이게이션 바에 있기 때문에 NavBar에 검색 input을 생성한다.

 

 

 

이렇게!! input 태그를 두 img 태그 사이에 넣고 검색 창에 값을 입력하면 handleChange함수를 호출한다.

 

그리고 searchValue state를 만들어줬다.

 

 

흠챠 이제 css 스타일링을

 

요로콤시 해주면

 

 

이렇게 검색 창이 잘 만들어진 것을 확인할 수 있다.

 

 

이제 다시 Nav.js로 돌아와서

react-router-dom을 통해 useNavigate를 사용할 navigate를 만들어줬다.

 

이건 검색을 했을 때 경로가 이동되도록 하기 위함이다.

 

 

이제 handleChange함수에 받아온 이벤트의 value 값을 넣어서 searchValue state를 업데이트 시키고

navigate의 /search?q=뒤에 경로를 붙인다.(왜인지는 바로 아래 나옴)

 

 

 

그러면

이렇게 검색창에 값을 입력하는대로 검색 경로에 반영되는 것을 확인할 수 있다!!!!

 

 

---

 

이제 SearchPage에서 SearchTerm을 가져와야 한다.

 

여기서 SearchTerm 이란 주소에서 ?q= 뒤에 나오는 우리가 입력한 그 값이다!!

searchpage에서 이 searchterm을 가져와야 데이터를 받아올 수 있다.

 

이때 위에서 봤던 useLocation을 사용할 것이다.

 

그래서 이렇게

useQuery 함수를 만들어서 내부에 useLocation을 사용하고 이게 뭔지 확인해보려고 콘솔 찍어봄!!

 

 

 

그러면 이렇게 나온당... 흐흐 여기서 저 search의 =뒤의 부분만 가지고 올 거라구!!!

 

 

 

그래서 URLSearchParams를 써줬고 (이는 url의 파라미터 값을 확인하고 싶을 때 사용한다고 함!!)

 

이렇게 위의 useQuery 함수를 query로 만들고 searchTerm을 query.get('q')로 받으면 위에서.. q= 뒤의 값을 seacrhTerm이 가지게 되는 것이다...!!! 흐앙 복잡혀라~~

 

또 확인해보려고 콘솔 찍어보면!

이렇게 searchTerm으로 잘 가지고 오는 것을 확인할 수 있다.

 

 

자 이제 searchTerm을 이용해서 영화의 상세 데이터를 가지고 와야지!!

 

 

우선

우선 useEffect로 searchTerm이 이는 경우에 fetchSearchMovie 함수를 호출하고 인자로 넘겨줬다.

이때 배열에 searchTerm을 넣어주는 이유는 searchTerm이 변경될 때마다  fetchSearchMovie 함수를 호출하기 위해서이다.

 

 

그리고

이렇게 searchResults state를 만들고

 

fetchSearchMovie 함수를 구현했다. 비동기 처리니까 async await 써줬고.. try catch 문으로 에러 잡아줌..

 

흠흠 request는 axios.get으로 searchTerm을 사용해 영화 정보를 가져왔다. (성인 영화 제외하고)

 

그리고 setSearchResults로 그 영화들의 results값을 searchResults로 업뎃!!

 

콘솔 찍힌거 보면

 

이렇게 한 글자마다 실행되고 data의 results에 정보가 담겨있는 것을 확인할 수 있다...

 

 

아 고되다 쥥짜ㅠㅠㅠ

이제 다음 챕터에서 UI 작성해주면 끝임ㅠㅠㅠㅠㅠ흐아

 

 

 

---

 

 

4. netflix-clone_4

: 검색 페이지 UI 구현하기

 

 

위의 searchTerm이 있을 경우와 없을 경우로 나눠서 UI를 작성할 것이다.

 

있을 경우에는

파하... 이렇게... 우선 renderSearchResults 함수를 만들었다.

그래서 searchResults.length가 0보다 큰 경우 즉, searchTerm이 있는 경우에는

searchResults 배열에 map으로 영화를 하나씩 접근하면서.. backdrop_path가 null이 아니고 media의 타입이 사람이 아닌 경우에 해당하는 backdrop_path url을 가져온다!!

 

그리고 이를 이용해서 return문에 UI를 작성.....

 

 

이제 해당하는 영화가 없는 경우는

이렇게 간단하게 작성하고 마지막에 함수를 return 해준다.

 

 

이제 마지막으로 SearchPage.css만 작성하면 끝이다. (강의 복붙)

 

 

 

 

그럼 쫘잔~!!!

 

이렇게 잘.. 나온다 하하하하하~~~.....ㅠㅠㅠㅠ

 

힘들어ㅠ