[TIL/React] 2023/03/04

라우터란?: 여러 웹페이지를 만드는 지름길

'Route'는 다음과 같이 '경로'라는 뜻을 갖고 있다. 여러 웹페이지를 만들고 경로에 따라서 이동할 수 있게 만들어 주는 것이 라우터의 역할이다.

우선 react router를 설치하는 명령어를 터미널에 입력해서 설치를 완료했다. 이후 {BrowserRouter}라는 것을 index.js 상에서 import하고 App component를 BrowserRouter라는 이름의 태그로 감싸주었다.

홈페이지와 어바웃페이지, 두 페이지가 있다고 가정하고 둘을 라우터를 사용해서 따로 접근하도록 설정했다.

사용법은 다음과 같다.

구체적인 경로와 요소를 지정했고, 결과는 다음과 같다.

Link, Navigate: 페이지 사이를 이동하는 법

페이지를 이동할 때마다 URL을 직접 입력하는 것은 번거롭다. 'Link'를 통해 더욱 간편하게 해당 내용을 구성해 봤다.

클릭하면 about page로 자연스럽게 넘어간다.

다음으로는 'useNavigate'라는 React Hook을 사용해서, about page에서 home page로 이동하도록 했다.

Restful Route

'Restful Route'의 개념을 이해하기 위해 두 가지 페이지를 만들었다.

쇼핑몰을 운영한다고 가정하자. 전체 상품을 소개하는 페이지가 있고, 그 중 하나의 상품을 클릭했을 때 나오는 detail 페이지가 있다. detail page의 '경로명'을 지정하기가 상당히 까다로웠다. 경로명 자체를 정하는 것도 어려웠으며, 만약 상품의 개수가 100개가 넘는다면 매번 해당하는 경로명을 지정하는 것은 지나치게 비효율적일 것이다.

위의 문제를 해결하기 위해 router의 기능을 이용해서 각각의 경로를 지정하되 ':id'를 활용했다. ':id'는 parameter로서 작동한다. url의 해당 부분에 어떠한 값을 입력하더라도 detail page로 넘어간다.

다양한 웹 페이지를 만들 때 'URL 디자인'을 어떻게 할 것인가에 관한 논의가 있었고, 최근에 가장 많이 사용하는 'URL 디자인 패던' 중 하나가 바로 'Restful Routes'라는 것이다.

useParams: URL의 파라미터값을 읽어오자

id로 보낸 parameter 값을 읽어오기 위해 'useParams'라는 Reack Hook을 사용했다.

'params'라는 것을 콘솔에 찍어보면, 'key:value' 형태의 객체가 반환된다. 객체의 'key 값'을 알고 있기에, key 값을 바로 h1에 적용한 모습이다.

회고

학교 공부도 방치할 수는 없으니... 오늘은 회귀분석을 공부해야겠다.. ㅜ 내일도 화이팅!