넷플릭스 클론코딩 7 메인페이지, Route 설정

mainPage 구성 및 Route 설정

Route 설정

브라우저의 경로를 지정하기위해 리액트 라우터를 사용한다.

react-router-dom
SPA앱을 만들 때 많이 사용되는 패키지
react-router - 웹&앱
react-router-dom - 웹
react-router-native -앱
사용 버전 "react-router-dom": "^6.13.0",

## react-router-dom 설치
yarn add react-router-dom

이후 footer, accordion, opt-form, header, feature 순으로 components를 구성하고

이전 app.js를 containers 폴더에 컨테이너화 시키면서 필요한 코드들을 작성한다.

react-router-dom 6+ 버전 사용법

react-router-dom 5버전
app.js

'''
export default function App() {
return (
    <Route exact path="/user">
    <p>I will be the sign in page</p>
    </Route>
    <Route exact path="/user">
    <p>I will be the sign in page</p>
    </Route>
    <Route exact path="/user">
    <p>I will be the sign in page</p>
    </Route>
    <Route exact path={ROUTES.HOME}>
    <JumbotronContainer />
    <FaqsContainer />
    <FooterContainer />
    </Route>
    );
}

react-router-dom 6버전
app.js

'''

export default function App() {
  return (
    <Router>
    <Routes>
      <Route path="/signin" element={<SignIn />} />
      <Route path="/signup" element={<SignUp />} />
      <Route path="/browse" element={<Browse />} />
      <Route path={ROUTES.HOME} element={<Home />} />
    </Routes>
    </Router>
  );
}

중요한 차이점은 5버전은 Route {내용} /Route 을 사용했다면
6버전은 Route element={<함수 />} 하나로 감싸야 한다.
또한 Route 들은 Routes {Route들} Routes 로 감싸서 사용한다는 점이다.

SKIP_PREFLIGHT_CHECK
종속성 오류가 나면 사용
강의영상에는 사용을 안하면 오류가 났지만 최신 버전에서는 나지 않는것 같다.

프로젝트 루트 폴더에 .env 만들고 SKIP_PREFLIGHT_CHECK=true 지정

.env

SKIP_PREFLIGHT_CHECK=true

현재 진도 2:34:45

 

 

전체코드
branch: 07-mainpage-route
https://github.com/tkfka1/portfolio/tree/07-mainpage-route/netflix