[React] react-router-dom 라이브러리

목표

기존 자바스크립트 방식에서는 페이지를 나눌 때, html 파일을 만들어서 상세페이지 내용을 채우고

사용자가 url로 접속하면 현재 페이지와 다른 html 파일을 전송해줬다.

 

하지만 React에서는 index.html 하나 페이지만을 한다. 다른 페이지로 이동하는 것처럼 보일 수 있지만,

기능에 따라 보이는 컴포넌트를 교체해준 것 뿐이다.

 

이 때, 이 컴포넌트 교체 기능을 도와주는 라우팅 라이브러리인 react-router-dom 라이브러리 사용법에 대해 

공부해보겠다.

 

 라이브러리 사용을 위한 설정

1. 라이브러리 설치

npm install react-router-dom@6

터미널에서 프로젝트 폴더로 이동한 후 위 명령을 실행하여 라이브러리를 설치한다.

 

2. index.js 세팅 변경

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

BrowserRouter를 import하고, root.render의 <App/>태그를 <BrowserRouter> 태그로 감싸준다.

 

라우터

 1. 페이지 나누기

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

function App(){
  return (
      (...생략...)
    <Routes>
      <Route path="/" element={ <div>메인페이지</div> } />
      <Route path="/detail" element={ <div>상세페이지임</div> } />
    </Routes>
  )
}

이제 루트 페이지에서 뒤에 /detail을 덧붙여 url을 입력하면 상세페이지와 관련한 컴포넌트를 호출한다.

/detail 호출 모습

2. 페이지 이동 버튼

<Link to="/detail">상세피이지</Link>

링크를 클릭하면, 위 라우터에서 설정해둔 컴포넌트들이 호출되도록 페이지를 이동한다.(이동하는거처럼 보이게한다.)

 

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌