React Route

이번 시간은 리액트 라우터에 대해서 배워볼 것입니다.

라우터가 뭘까요?

사전적 정의로는 '각 메시지에서 목적지까지 갈 수 있는 여러 경로 중 한 가지 경로를 설정해 주는 과정' 이라는데

그럼 이 것을 왜 해야할까요?

 

그것은 리액트의 장단점에서 찾아볼 수 있습니다.

리액트는 Single Page Application입니다. 

그래서 페이지가 바뀔때 새로고침이 되지 않아 ux적인 측면에서 유용하다고 볼 수 있습니다.

이 장점 덕분에 많은 사람들이 사용하지만 단점도 존재합니다

앱의 규모가 커진다면 불 필요한 코드까지 렌더링 해야되서 로딩속도가 느려질 수 있습니다.

 

이 단점을 해결하기 위해 React router을 쓸 수 있습니다.

해당페이지에서 필요없는 정보들은 주소를 나눠서 담을 수 있습니다.

예를들어 abcd.com 이라는 사이트가 있다면 홈 화면에 모든 정보를 담는게 아니라

abcd.com/cart

abcd.com/mypage

등등 정보를 나누어 담아 불필요한 리소스를 사용하지 않을 수 있습니다.

 

그럼 React Router에 대해 배워보겠습니다.

 

 

 

React router를 사용하기 위해서는 먼저 "리액트 라우터 돔''을 설치하여야 합니다.

터미널에서 " npm install react-router-dom " 을 통해 설치할 수 있습니다

 

React router의 구성요소는 크게

1. BrowserRouter

2. Route

3. Switch

4. Link

5. NavLink

6. useParams

가 있습니다.

 

1. BrowserRouter

import {BrowserRouter} from 'react-router-dom';

로 BrowserRouter을 import합니다.

이 component는 react-router-dom을 적용하고싶은 컴포넌트의 최상위 컴포넌트에 감싸주는 wraper역할을 합니다.

예를 들면 render함수안의 <App/>을 감싸주면 됩니다.

Router을 사용할 Component를 지정해준다고 생각하시면 됩니다.

 

React router BrowserRouter

2. Route

url에 따라 달라지게 하려면 Route를 추가 import합니다.

달라지게하려는 component를 route component로 감싸고 prop으로 path 값을 줍니다.

Ex) <Route exact path="/"><Home></Home></Route>

-> path 앞에 exact를 붙임이면 정확히 “/“ 일때만 routing됩니다.

 

-> exact를 붙이지 않으고 path가 

  <Route path="/"><Home></Home></Route>

  <Route path="/2"><Home></Home2></Route>

  <Route path="/3"><Home></Home3></Route>

이렇게 있다고 치면 url을 "/2", "/3"을 쳐도 맨 위에있는 "/" 로 가버리기 때문에 exact를 붙여야 합니다.

 

 

3. Switch(자식으로 Route 필요, route는 해당 url 여러개 표시. but Switch는 해당하는것 하나만)

Switch 를 import하고 route component를 감싸주면 path와 일치하는 첫번째 component가 발견되면 나머지 component를 버립니다.

path = “/“ 이면 나머지 path의 component는 출력이 안됩니다.

-> switch를 쓰려면 path =“/“를 제일 밑에놔두거나 exact를 붙여서 사용해야 합니다.

-> 맨위에 exact path =“/“를 두고 마지막에 path=“/“를 두면 사용자가 이상한 url로 들어왔을때의 component를 띄울수 있다.( 싱글 웹앱이라 설정안하면 아무경로나 들어오든 같은 페이지 보여주기 때문에 필요)

 

4. Link

Link를 import하고 a tag대신 Link를 쓰고 href 대신 to 를 쓰면 page가 reload되지않고 변합니다.(싱글웹앱의 장점을 살릴수 있음)

 

5. NavLink

Link에 기능이 조금 더 부과된것이에요.

NavLink component를 클릭시 class 명으로 active가 추가되어 사용자가 어디에있는지 직관적으로 알 수 있습니다.

(css를 통하여 active된곳의 색을 다르게한다거나 다른 이펙트를 줘서 꾸미는 등을 할 수 있습니다)

 

이제 그림을 통해 설명드리도록 할게요.

 

react의 최상단 페이지고 여기에서 작업을 했습니다.

BrowserRouter로 <App/> component를 감싸주고 시작합니다.

 

NavLink를 통해 Home, topics, contat를 클릭하면 "/", "/topics", "/contact" 의 url로 가도록 만들었습니다

그후 Switch 와 Router을 통해 해당 경로가 들어오면 각각 Home, Topics, Contact의 컴포넌트를 불러오라고 지정했습니다.

 

 

6. useParams()

하나의 route를 가지고 path의 정보가 무엇이냐에 따라서 정보를 가지고와서 처리하는게 가능하록 하는 기능입니다.

이 기능을 쓰려면 마찬가지로 import {useParams} from 'react-router-dom'; 를 통해 import를 해주시고 사용하면 됩니다.

 

예시)

<Route path="/products/:product_id"><Product></Product></Route>

-> path에 :product_id 라는 임의의 기호를 넣게되면 저 자리에 들어오는 값들이 (ex 1,2,3...) 하위 component에 전달되고 그 전달된 값을 받기위해서 하위 component안에 useParams를 써서 /:product_id에 들어오는 값을 받아올수 있습니다.

ex)

products/1 일땐 products component내의 useParams()의 product_id는 1이될 것 이고

products/2 일땐 products component내의 useParams()의 product_id는 2이될 것 입니다.

 

 

 

- 이 노트는 생활코딩의 유튜브 강의를 통해 배운 내용을 정리한 것입니다.

- 초보 개발자라 부족한 점이 아직 많습니다. 다른 의견이 있으시다면 자유롭게 남겨주세요.

- 처음 접하시는 분께는 다소 어려울 수 있지만 어느 정도 개념이 잡히신 분께 도움이 되었으면 하는 바람에서 작성된 글입니다.