*** 노마드코더에서 무료로 강의해주는 ReactJS 강의를 보고 개인적으로 정리한 내용입니다. ***
하지만 앞으로 우리가 만들 웹페이지는 하나의 창으로 구성할 것이 아니다.
다른 많은 웹페이지가 그렇듯
사용자의 클릭에 따라 다른 창을 제공하는 것이 이상적일 것이다.
이를 위해 react-router-dom을 이용할 것이다.
전체적인 구조는
기존의 영화 목록을 담고 있던 App.js를 home.js로 바꾸고
영화의 정보를 담는 페이지인 about.js를 따로 만들어 준다.
App.js는 사용자의 선택에 따라 home.js나 about.js를 보여주게 되는 것이다.
따라서
App.js의 코드를 그대로 home.js에 넣어주고 App.js는 우선 비워놓는다.
또한 src밑에 추가적인 폴더를 만들어준다.
그리고 App.js에 router를 넣어주면 된다.
Router는 간단한 react componet이다.
Router가 하는 역할은 매우 간단하다.
기본적으로 url을 가져와서 사용자의 명령에 따라 해당하는 component를 불러온다.
Router는 여러 종류가 있지만, 여기서는 hashrouter를 사용할 것이다.
App function의 return으로 HashRouter를 써주고 를 HashRouter안에 넣어준다.
Route안에는 중요한 props이 들어간다.
하나는 rendering할 화면이고 다른 하나는 어떤 task를 할지 정해주는 것이다.
Route를 위와 같이 작성했다면,
우리가 import한 about.js로 가서 About이라는 component를 rendering하라는 의미이다.
위처럼 작성하고 다시 창을 보면 url이 바뀌어 있다.
#은 그냥 hash값이라고 한다. 우리가 보고 싶은 창은 about.js의 About()을 실행한 창이다.
아래와 같은 about.js의 About()을 component로 받기 위해서는
url을 아래와 같이 작성해준다.
그러면 아래와 같이 원하는 결과를 볼 수 있다.
우리는 home으로 작성한 영화 목록 화면을 기본 값으로 두고 싶다.
따라서 추가적인 route를 하나 더 작성해준다.
저장하고 다시 http://localhost:3000/#/로 들어가보면
원하는 창이 나온다.
하지만 문제점이 하나 있다.
우리가 만든 about.js에 들어가면 아래와 같은 오류가 발생한다.
바로 home이랑 겹쳐서 나온다는 것이다.
이것은 react의 url이 작동하는 방식과 연결되는 오류이다.
왜 이런 오류가 발생하는 것일까?
React는 기본적으로 url을 가져온다.
그 후 router에 있는 모든 url과 비교한다. 그리고 match되는 모든 url을 렌더링 한다.
다시 코드를 보자.
위에서 /about을 path로 설정한 것을 보면
첫 번째 route에서 "/"와도 match되고 두 번째 route인 "/about"r과도 일치한다.
따라서 두 개의 다른 component를 모두 화면에 띄우는 것이다.
이 오류를 방지하기 위해 아래처럼
“exact true”를 추가해준다.
이를 추가하면, url이 완벽히 일치할 때만 rendering을 해준다.
그러면 다른 두 개의 component가 동시에 rendering되는 현상을 방지할 수 있다.
