react-router-dom 복습

기본 설정

설치

npm i react-router-dom
# 만약 TS 환경이라면 아래의 패키지도 설치해주자.

npm i @types/react-router-dom

→ 위처럼 버전을 명시하지 않고 설치할 경우 v6 버전이 설치되니 참고하자!

프로젝트에 불러오기

• import 문법을 이용하여 해당 라이브러리를 불러오고, 구조분해 할당을 통해 원하는 컴포넌트를 불러온다.

import { 사용하고자 하는 컴포넌트 } from "react-router-dom"

function App: JSX.Element () {
	return (
    // 내용
  )
}

export default App;

라우트 설정하기

BrowserRouter

• 먼저 라우트를 설정하기 위해서는 적용하고자 하는 컴포넌트가 BrowserRouter의 자식이여야한다.
• 라우트 설정은 보통 App 컴포넌트에서 이루어지는데, App 컴포넌트를 감싸기 위해 상위 컴포넌트인 index.tsx 에서 App 컴포넌트를 감싼다.

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
// BrowserRouter 불러오기

import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <Router>
    <App />
  </Router>
);

Routes / Route

• Route 는 Routes 자식요소여야 하며, Route 로 원하는 주소(path)와 표시할 컴포넌트를 지정하는 방법은 아래와 같다.
• <Route path=”경로명” element={렌더링할 컴포넌트} />

import { Routes, Route } from "react-router-dom"

function App: JSX.Element () {
  return (
	<Routes>
      <Route path="/" element={<첫화면 />} />
      <Route path="경로1" element={<컴포넌트1 />} />
      <Route path="경로2" element={<컴포넌트2 />} />
    </Routes>
  )
}

export default App;

• 위와 같이 설정한 경우 www.주소.com/경로1 인 경우에 컴포넌트1 을 렌더링하고, www.주소.com/경로2 인 경우에 컴포넌트2 를 렌더링한다.
• 이렇게 설정하면 주소에 따라 내가 원하는 컴포넌트를 렌더링 할 수 있게된다.

Link

• 마지막으로 주소를 설정했으니, 해당 주소로 이동하는 링크를 만들어 줘야한다.
• to 속성을 이용하며 이동할 경로를 설정해 줄 수 있으며, 해당 링크가 클릭되었을 때 여기서 설정된 경로로 이동한다.
• <Link to=”경로”> 링크 이름 </Link>

import { Routes, Route, Link } from "react-router-dom"

function App: JSX.Element () {
  return (
    <Link to="/">첫화면으로 가기</Link>
    <Link to="경로1">컴포넌트 1로 가기</Link>
    <Link to="경로2">컴포넌트 2로 가기</Link>

	<Routes>
      <Route path="/" element={<첫화면 />} />
      <Route path="경로1" element={<컴포넌트1 />} />
      <Route path="경로2" element={<컴포넌트2 />} />
    </Routes>
  )
}

export default App;

• 이때 Link 컴포넌트로 만들어진 요소는 html 상에서 a 태그로 생성된다.

---

+

• 간단한 내용이지만, 초기에 라우트 설정을 하고 나면 이후에는 신경을 쓰지 않아 종종 헷갈리는 경우가 생겨 다시 한번 정리해본다.