[ReactJS] ReactJS로 영화 웹 서비스 만들기 (17) - Router

Router를 들어가기전에,

사실 더이상 state를 갖기 위해 class component를 가질 필요가 없다.
하지만 이것은 react의 새로운 부분이고 이것을 이해하는데 많은 시간이 걸린다.

그냥 react hook 이란것 때문에 더이상 state를 갖기 위해 class component를 가질 필요가 없다는 것만 알아둬라.

그렇다고 여태까지 한 내용이 올드한 내용이란 의미는 아니다. react.js 공식 문서에도 여전히 class component 는 가르치고있다.

react hook은 그냥 새로운것이지 대체물이 아니고 class component가 구식이 아니라는 의미이다.

---

 

이제 Router에 대한 학습을 시작해보자.

지금까지의 웹 페이지를 구현하는것도 물론 좋았지만 이 페이지에 인터랙션을 추가해보고 싶다.
상단에 네비게이션을 넣어보자.

네비게이션은 react-router dom 이라 불리는걸 쓸것이다.
react-router dom : 네비게이션을 만들어주는 패키지.

www.npmjs.com/package/react-router-dom

react-router-dom

npm i react-router-dom

 

그 다음에 할일은 src 폴더를 정리하는 것이다.

components와 routes라는 폴더를 생성한 후
Movie.js 와 Movie.css를 component에 넣고
import 했던 경로를 바꿔준다.

 

routes 폴더에 Home.js와 About.js라는 파일을 생성한다. -> 이제 2개의 라우터(2개의 스크린)을 가졌다는 의미이다.
첫 번째 스크린은 영화설명이 될 것이고 두 번째 스크린은 About페이지가 될 것이다. -> App.js를 손 봐줘야한단 소리.
    - getMovies, renderMovies 이런것 대신 router로 변경할 것이다.
Home.js에 App.js의 내용을 복붙한다.
App을 Home으로 바꾸고
App.css를 routes로 옮긴 후 Home.css로 이름 변경한다.
import 했던 경로를 바꿔준다.

 

App.js가 이제 Home.js로 대체되었다. 이제 App.js 내용을 싹 지우자.
그리고 이곳에는 함수형 컴포넌트를 만들것이다. 

 

이제 something 대신에 router를 넣어보자.

라우터는 url를 가져다가 확인하고, 내가 라우터에 뭘 명령했느냐에 따라 어떤 컴포넌트를 불러올지 정한다.

먼저 방금전에 install 한 react-router-dom은 많은 종류의 라우터를 가지고있는데,
이중에서 HashRouter와 Route를 import 한다.

 

그다음엔 App()이 <HashRouter>를 return 하도록 하고

<HashRouter> 안에 <Route>를 넣어준다.

<Route> 안에는 매우 중요한 props 들어간다.

한 prop은 렌더링할 스크린이고 (component)
다른 prop은 뭘 할지 정해주는 것이다. (path)

요런식으로 말이다.
참고로 path랑 import할 컴포넌트랑 이름을 갖게할 필요는 없다.

하지만 지금 About 컴포넌트는 비어있는 상태이므로 아무것도 나오지 않을 것이다. 빠르게 채워넣어보자.

좋았어 이제 url 에 /about 붙여보면 작성한 내용이 잘 나오는것을 확인할 수 있다.

이런식으로 component별로 path를 지정할 수 있다!

About도 했으니 Home도 똑같이 해보자.

이제 / 경로에서 Home 컴포넌트를 볼 수 있다!

 

하지만 /about 으로 들어가니까 About 컴포넌트 뿐만 아니라 Home 컴포넌트도 보인다...?

뭐지? 2개의 컴포넌트가 동시에 렌더링이 된다?

이게 react 라우터가 작동하는 방식이다.
url경로를 읽을 때 겹치는 애들을 전부 렌더링하게 된다.

이를 방지하려면 <Route> 태그에 exact 속성을 추가해야 한다.
exact : 정확히 이 path 아니면 렌더링 안할거임!

"/" 경로와 완벽히 일치해야지만 Home 컴포넌트를 렌더링하도록 해보자.

훌륭하다.