[React] 라우터 사용하기

어떤 웹 사이트를 들어갔을 때 헤더부분에 있는 내비게이션 바에서 메뉴하나 누르면 메뉴 이름에 맞는 페이지로 이동하는 경험이 다들 있으실 겁니다.

이러한 개념을 라우팅이라하는데 오늘은 미리 만들어둔 페이지를 이용하여 라우팅을 해보려합니다.

 

 

 

 

 

미리 만들어둔 페이지의 store부분을 구현해 보려 합니다.

 

리액트에서는 HTML을 하나만 사용하기 때문에 외부 라이브러리를 사용해서 구현하는게 일반적입니다.

 

 

 

 

 

 

라우터 설치하기

 

react-router-dom이란 것을 설치해야합니다.

 

https://reactrouter.com/

React Router Official Documentation

 

해당 페이지에서 더 많은 내용을 확인해 볼 수 있지만 우선은 설치만 해보도록 합시다.

 

 

터미널을 열어서 이렇게 작성하면 가장 최근버전의 라우터가 설치 될 겁니다.

 

그러나 가장 최근버전을 깔아서 충돌 오류가 난다면 npm install react-router-dom@6으로 다시 깔면 됩니다.

 

25년기준 최근버전은 6버전으로 버전에 따라 조금씩의 차이가 있으니 유의해야합니다.

 

설치가 잘 되었다면 node_module 폴더에 react-router-dom이라는 폴더가 만들어져 있습니다.

 

 

 

 

 

라우터 셋팅하기

 

라우터를 잘 설치했다면 셋팅해주어야 할 것이 있는데

 

index.js로 가서 설치한 라우터를 import 해와야 합니다.

 

 

라우터를 import해서 App컴포넌트를 라우터로 둘러 싸면 끝입니다.

 

 

 

 

라우터 사용하기

 

셋팅을 끝맞췄으면 본격적으로 라우터를 사용해 볼 수 있습니다.

 

 

 

1. 우선 App.js에 라우터를 import 해옵니다.

 

2. App.js return문 안에 <Routes>를 만들고 그 안에 <Route>를 만들어 줍니다.

 

3. Route 안에 path와 element를 입력해줍니다. path는 url경로이고 element는 해당 url에 보여줄 html입니다.

 

 

저는 홈페이지를 열자마자 보이고싶은 메인페이지와 전체 상품을 보여줄 상품 페이지를 따로 구현해 뒀습니다..

 

 

 

이제 path에 입력해둔 url 경로를 따라 입력해보면

 

 

 

 

정말 url 경로마다 보이는게 다르네요

 

하지만 보통의 유저들이 페이지를 이동할 때마다 url경로를 고쳐서 이동하는게 아닌 헤더의 메뉴를 눌러서 이동하게 되니까 

 

이 부분도 고쳐야 겠습니다. 

 

앞서서 라우터를 import할 때 Link라는 키워드도 같이 가져왔습니다.

 

이 Link라는 키워드를 이용하여 헤더 메뉴를 누를 때 원하는 페이지를 보이게 할 수 있도록 바꿔놓겠습니다.

 

 

 

 

 

Link 라는 키워드는 옆에 to를 붙여서 라우터로 정해놓은 path에 연결할 수 있습니다.

 

저는 로고를 누르면 메인페이지로 헤더의 store 메뉴를 누르면 store 페이지로 이동하게끔 해두었습니다. 

 

 

리액트 라우터 몇가지 문법 : https://mtm1018.tistory.com/40

 

 

/ 요약

 

1. 라우터는 경로를 나누어 한가지 html에서 여러가지 페이지가 보이게 할 수 있는 기능이다.

 

2. route의 path는 url경로 element안에 어떤것을 보여줄지 넣으면 된다.

 

3. Link to="path경로"를 사용해서 클릭시 경로이동을 구현할 수 있다.