Netflix 앱 완성하기

dev bourgeois·2023년 11월 18일

React A-Z Study

목록 보기

5/10

영화 나열을 위한 Row 컴포넌트 생성하기

*전체 구조

*Row 컴포넌트 생성
Row.js

*App 에 Row 가져오기
App.js

*내려준 Props 가져오기

⚠️ 실수
: requests가 정의되지 않았다고 오류가 떠서 다시 보는데 파일 명에 오타가 있었다. 이를 수정했음에도 오류가 해결되지 않아 requests를 직접 import 해줘서 해결했다.

*영화 정보 가져오기

*UI 생성하기
<, > 를 화면에 보이게 할 때는 <> 와 상충되므로 {"<"}
{">"} 이런 식으로 작성한다.

⚠️ 실수
: map 함수 형식 소괄호!
map(movie -> ())

슬라이드 기능 추가하기

Row.js
*화살표 방향 클릭 시 슬라이드 구현

document.getElementById(id).scrollLeft = document.getElementById(id).scrollLeft - (window.innerWidth - 80)

*document

https://developer.mozilla.org/ko/docs/Web/API/Document

*scrollLeft

Element.scrollLeft 속성은 요소의 콘텐츠가 왼쪽 가장자리에서 스크롤되는 픽셀 수를 가져오거나 설정한다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

*innerWidth

https://itchief.ru/javascript/window-sizes-and-scrolling

Footer.js

⚠️ 오류 : Footer.js에서 styled 정의x
해결:

App.js에서 Footer 호출

영화 자세히 보기 클릭 시 모달 생성하기

*해당 영화 클릭 시 모달 Open
Row.js

*클릭 한 영화의 정보 가져오기

*모달 컴포넌트 생성

index.js

*Props 가져오기
index.js

Movie 모달 UI 생성하기

*UI 생성하기

뭔가 가로 세로 길이나 비율을 다시 조정해야 할 것 같다..
이건 더 해보면서 봐야겠다.

React Router Dom

React Router DOM을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다.

*Single Page Application (SPA)

리액트는 SPA이기 때문에 하나의 index.html 템플릿 파일을 가지고 있다. 이 하나의 템플릿에 자바스크립트를 이용해서 다른 컴포넌트를 index.html 템플릿에 넣으므로 페이지를 변경해주게 된다. 이때 React Router Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 준다.

https://ncoughlin.com/posts/intro-to-react-router/

*React Router Dom 설치하기

npm install react-router-dom --save

yarn add react-router-dom

*React Router 설정하기

설치가 완료된 후 가장 먼저 할 일은 앱 어디에서나 React Router를 사용할 수 있도록 하는 것이다.이렇게 하려면 src 폴더에서 index.js 파일을 열고 react-router-dom에서 BrowserRouter를 가져온 다음 루트 구성 요소(App 구성 요소)를 그 안에 래핑한다.

BrowserRouter로 루트 컴포넌트 감싸주기
여러 컴포넌트 생성 및 라우트 정의하기
<Link/> 를 이용해 경로를 이동하기

Link 구성 요소는 HTML의 앵커 요소(<a>)와 유사하다. 그것의 to 속성은 링크가당신을 데려가는 경로를 지정한다.
앱 구성 요소에 나열된 경로 이름을 생성했기 때문에 링크를 클릭하면 경로를 살펴보고 해당 경로 이름으로 구성 요소를 렌더링한다.

React Router Dom APIs

*중첩 라우팅(Nested Routes)

React Router의 가장 강력한 기능 중 하나이므로 복잡한 레이아웃 코드를 어지
럽힐 필요가 없다. 대부분의 레이아웃은 URL의 세그먼트에 연결되며 React
Router는 이를 완전히 수용한다.

*Outlet

자식 경로 요소를 렌더링하려면 부모 경로 요소에서 <Outlet>을 사용해야 한다. 이렇
게 하면 하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있다. 부모 라우트가 정확
히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌
더링하지 않는다.
react-router-dom에서 가져와서 사용한다.

*useNavigate

경로를 바꿔준다. navigate('/home') ===> localhost:3000/home 으로 간다.

*useParams

:style 문법을 path 경로에 사용하였다면 useParams()로 읽을 수 있다.
아래는 :invoiceId가 무엇인지 알기 위해 usePrams를 사용했다.

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

*useRoutes
useRoutes Hooks는 와 <Routes>와 기능적으로 동일하지만 <Route> 요소 대신 JavaScript 객체를 사용하여 경로를 정의한다. 이러한 객체는 일반 <Route> 요소와 동일한 속성을 갖지만 JSX가 필요하지 않다.

Netflix 앱에 React RouterDom 적용하기

*React Router Dom 이용해서 구현할 부분

검색 페이지
디테일 페이지

*페이지 생성을 위한 폴더 및 파일 추가
페이지를 담는 pages 폴더와 그안에 해당 페이지들을 넣어준다.
이 애플리케이션에서는 메인 페이지와 상세 페이지만 만든다.

*App.js를 라우팅을 위한 파일로 변경

현재 App.js가 메인 페이지를 위한 컴포넌트로 이뤄져있으므로 이 부분을 다 MainPage/index.js로 옮겨준다.
App.js는 라우팅을 위한 파일로 바꿔준다.

*App.js 파일

*index.js 파일

보통 React Router DOM을 사용할 때는 BrowserRouter나 Route와 같은 컴포넌트들을 사용하여 라우팅을 구현한다.
만약 React Router DOM 패키지를 설치하고 해당 파일에서 사용하려고 한다면, 예를 들어 <BrowserRouter>로 감싸인 <Route> 컴포넌트 등을 이 파일에서 사용하도록 추가 작업을 해주어야 한다.

*MainPage/index.js
../../ 2번 나감. 파일 구조 이해하기

검색 페이지 구현

*NavBar에 검색 Input 생성
Nav.js

⚠️ 실수
입력창에 입력하면 value가 undefine되었다고 뜨던데 다시 보니
target에서 t를 빼먹었다.. 오타 주의❕

Nav.css

*Search 페이지에서 SearchTerm 가져오기
useLoacation

*SearchTerm 이 바뀔 때마다 새로 영화 데이터 가져오기

검색 페이지 UI 구현

*SearchTerm 에 해당 영화 데이터가 있을 경우

*SearchTerm 에 해당 영화 데이터가 없을 경우

useDebounce Custom Hooks 만들기

*Debounce

아래 그림을 보면 검색 입력에 입력할 때 입력 결과가 나타날 때까지 지연이 있다. 이 기능은 debounce 디바운스라는 function에 의해 제어된다. debounce function 은 사용자가 미리 결정된 시간 동안 타이핑을 멈출 때까지 keyup 이벤트의 처리를 지연시킨다.
이렇게 하면 UI 코드가 모든 이벤트를 처리할 필요가 없고 서버로 전송되는 API 호출 수도 크게 줄어든다. 입력된 모든 문자를 처리하면 성능이 저하되고 백엔드에 불필요한 로드가 추가될 수 있다.