💻 React - react router v6 적용하기

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

📃 오늘 공부한 것

React Router

React Router

라우팅이란?

여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템이다.

React Router

React를 위한 모든 기능을 갖춘 클라이언트 및 서버측 라우팅 라이브러리이다. React가 실행되는 모든 곳(nodejs, react native, web 등)에서 실행된다.

Next.js

리액트 프로젝트의 프레임워크이다. cra 처럼 여러 설정, SSR 등의 기능을 제공하고 next.js는 파일 경로 기반으로 라우트가 작동한다.

React Router를 사용하여 라우터 구현하기

1. BrowserRouter

BrowserRouter는 HTML5dml History API를 사용하여 URL과 UI를 동기화해주는 Router이다.

페이지를 새로고침하지 않아도 주소를 변경할 수 있게 해주고, 현재 주소에 관련된 정보를 props로 조회 및 사용이 가능하도록 한다.

리액트 라우터 돔을 적용하고 싶은 컴포넌트의 최상위 컴포넌트를 감싸주는 컴포넌트이기 때문에 App컴포넌트를 감싸주면 된다.

// cra로 생성한 앱에서 index.js
<React.StrictMode>
  <BrowserRouter>
  <App />
  </BrowserRouter>
</React.StrictMode>

2. 페이지 컴포넌트 만들기

각 페이지에서 사용할 컴포넌트를 아래처럼 만든다.

📦pages
┣ 📜LoginPage.js
┣ 📜MainPage.js
┗ 📜SignUpPage.js

// MainPage.js
const MainPage = () => {
  return <div>Main</div>
}

export default MainPage

3. Route 컴포넌트로 원하는 컴포넌트 설정해주기

react router v6는 Route는 다음과 같은 방식으로 사용된다.
<Route path="주소" element={보여 줄 컴포넌트 } />

// main, login, sign-up페이지 라우트 설정
<Routes>
  <Route path="/" element={<MainPage />} />
  <Route path="/login" element={<LoginPage />} />
  <Route path="/sign-up" element={<SignUpPage />} />
</Routes>

🔥 느낀점

아무래도 프로젝트 초기 설정이다 보니 기본적인 내용만 설정해두었다. 처음에는 이렇게 시작하고 차차 페이지도 내용도 많아질 것이기 때문에 잘 설정해 준 것 같다.

다같이 사용할 부분이기 때문에 조금 더 신중해지고 조심스러워 지는 부분이다. 그래서 더욱 확장성 있게 만들려고 노력하고 있다.