React Router는 URL을 어느 페이지로 연결시킬지 결정하는 일을 한다.
그렇다면 단순히 링크 태그를 사용하면 될텐데 왜 React Router를 쓰는 걸까?
기본적으로 리액트는 SPA(Single Page Application)이다.
모든 컴포넌트의 변화가 하나의 페이지 안에서 일어난다.
다른 URL로 이동하면 페이지 전체가 교체되는 것이 아니라 한 페이지 내부에서 컴포넌트의 변화만 일어날 뿐이다.
이런 환경에서 사용자는 원하는 페이지에 북마크를 할 수도 없고, 히스토리가 생기지도 않아서 뒤로가기 기능을 수행할 수 없다.
이러한 리액트의 단점을 React Router로 보완할 수 있다.
React Router 사용방법
이제는 React Router를 어떻게 사용해야 하는지 정리해보자.
내가 공부하면서 봤던 영상 속 버전과 현재 버전이 달라서 정리하는데 고생 좀 했다.
현재 내가 정리하는 React Router 버전은 v6이다.
가장 먼저 BrowserRouter를 import 해준다.
BrowserRouter말고 다른 이름으로 쓰고 싶다면 BrowserRouter as Router와 같이 작성해주면 된다.
import { BrowserRouter } from 'react-router-dom';import { BrowserRouter as Router } from 'react-router-dom';
다음으로는 연결하고 싶은 경로에 컴포넌트를 연결해준다.
React Router는 개발자가 직접 url을 설정하고, 해당 경로에 원하는 컴포넌트를 연결할 수 있다.
<Route path="/home" element={<Home />} />=> 위처럼 작성했을 경우 {base}/home 경로에 <Home /> 컴포넌트가 연결된다.
이때 각각의 Route는 Routes 태그로 묶어야 한다(이전 버전에서는 Routes가 아니라 Switch로 묶었다).
<BrowserRouter>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/profile" element={<Profile />} />
</Routes>
</BrowserRouter>
React Router 쓰는 이유
만약 링크를 사용했다면 전체 페이지가 교체되었겠지만, React Router를 사용함으로써 업데이트 된 부분만 새로 렌더링된다.
뿐만 아니라 각각의 컴포넌트마다 URL이 생겼으니 북마크 또는 히스토리 기능을 사용할 수 있게 되었다.
즉 React Router는 리액트에 path를 추가해서 기존의 장점을 유지하는 것뿐만 아니라 단점까지 개선한 것이다.
+ 추가 작성
v5에선 path에 string 배열을 사용할 수 있었는데, v6부터는 오로지 string만 쓸 수 있게 되었다.
v6: https://reactrouter.com/en/main/components/route
v5: https://v5.reactrouter.com/web/api/Route/path-string-string
굳이 하나의 컴포넌트를 여러 URL에 연결하고 싶다면 다음과 같이 map을 활용하는 방법이 있는 것 같지만,
<Routes>
{["/dashboard", "/home"].map(path => (
<Route
key="Home" // optional: avoid full re-renders on route changes
path={path}
element={<Home />}
/>
))}
</Routes>클린 코드를 작성하기 위해 위와 같은 상황은 되도록이면 안 만드는게 좋을 듯 싶다.
코드 출처: https://stackoverflow.com/questions/69921188/react-router-dom-v6-pass-array-to-path
+ 의문점
v5에선 Route에 연결할 컴포넌트를 인라인으로 작성하는 방법과 자식으로 작성하는 방법 2가지가 있다.
인라인으로 작성하면 연결된 path로 이동할 때마다 컴포넌트가 다시 렌더링 되지만, 자식으로 작성하면 한 번 렌더링 됐던 컴포넌트를 재사용할 수 있다. 그러나 v6에서는 오로지 인라인으로만 작성 가능한 것 같다. 이 경우 컴포넌트가 다시 렌더링 되는 것인지 만약 그렇다면 v5처럼 한 번 렌더링한 컴포넌트를 재사용할 수 있는 방법은 없는지 궁금하다.
아직까진 이에 관련한 해답을 찾지 못 했다....이후 찾게 되면 다시 돌아와서 포스팅하도록 하겠다.