[React] React Router란?

보통 웹사이트에서는 주소를 직접 입력하거나 링크를 클릭하면 새로운 페이지를 보여준다. 리액트로 이런 사이트를 만드려면 따로 추가적인 개발이 필요하다.

이때, 별도의 개발없이 쉽게 사용할 수 있는 것이 "리액트 라우터"이다.

 

React Router 란?
리액트 컴포넌트로 페이지를 나누고, 이동하게 해주는 라이브러리

즉, 리액트 라우터를 사용하게 되면 여러 페이지를 나누고 이동하는 것을 컴포넌트로 할 수 있다.

 

리액트 라우터의 핵심 컴포넌트는 4가지이다.

1. 라우터(Router)
2. 라우츠(Routes)
3. 라우트(Route)
4. 링크(Link)

각각 어떤 역할을 하는지 살펴보자.

1. 라우터(Router)

라우터는 리액트 라우터에서 사용하는 데이터들을 모두 갖고 있는 컴포넌트이다. 예를 들어, 현재 주소, 페이지 기록과 같은 데이터들이 라우터에 들어있다.

그렇기 때문에 라우터가 없으면 react-router 를 사용할 수 없다.

Router 컴포넌트도 내부적으로는 Context Provider이다. 그래서 react-router 에서 제공하는 기능을 사용하려면 반드시 Router 컴포넌트 안에서 사용해야 한다.

 

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

function Main() {
    return <BrowserRouter> ... </BrowserRouter>;
}

export default Main;

 

보통은 위와 같이 최상위 컴포넌트에서 Router를 감싸고 사용한다.

이렇게 하면 프로젝트 전체에서 react-router를 사용할 수 있게 된다.

 

2. 라우츠(Routes) 와 라우트(Route)

이 두 컴포넌트는 주로 같이 사용된다.

 

<Routes>
    <Route path="/" element={ <HomePage /> } />
    <Route path="*" element={ <NotFountPage /> } />
</Routes>

 

위와 같이 Routes 컴포넌트 안에서 Route 컴포넌트로 페이지의 경로(path) 와 보여줄 컴포넌트(element)를 지정한다.

Route 컴포넌트의 path prop으로 경로를 지정하고 element prop으로 보여줄 컴포넌트를 지정할 수 있다.

이때, element prop은 컴포넌트 함수가 아니라 jsx 를 넘겨주어야 한다.

 

Routes 는 이와 같이 여러개의 Route 컴포넌트로 이뤄져있다.

Routes를 렌더링할 때 react-router는 Routes 안에 있는 Route를 차례대로 검사하면서 현재 경로가 path 와 일치하는지 하나씩 검사한다. 일치하는 경로를 찾으면 element prop으로 지정한 컴포넌트를 렌더링해주는 것이다.

 

3. 링크(Link)

Link 컴포넌트는 react-router에서 <a> 태그 대신해서 사용하는 것이다.

 

<Link to="/">홈페이지</Link>
<Link to="/courses">수업 탐색</Link>
<Link to="/questions">질문하기</Link>

 

설치하기

리액트 라우터는 리액트에서 제공하는 기본 기능이 아니기 때문에 우리가 따로 설치해서 써야 한다.

 

npm install react-router-dom

 

터미널에 명령어를 입력하면 react-router가 설치 된다.