[React] (5) 리액트 라우터

1. 리액트 라우터?

리액트 라우터 = 라우팅 관련 라이브러리 (페이지 이동)

-> 신규 페이지를 불러오지 않는 SPA에서 각각의 url에 따라 선택된 페이지를 렌더링 해주는 라이브러리

 

** 리액트는 CSR을 통해 하나의 페이지에서 유저의 요청에 따라 컴포넌트들을 재구성하여 화면을 렌더링하는 SPA 방식

 

CSR, SPA에 대한 자세한 설명은 여기를 참고하자

https://coding-hana.tistory.com/15

CSR, SSR, SSG 정리

 

2. 리액트 라우터 설치

npm install react-router-dom@6

 

v6로 설치했고, v5와 v6의 차이는 하단 블로그에서 확인하자

https://han-py.tistory.com/433

[react] router 버전 해결 (react-router-dom)

 

- 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하기

<BrowserRouter>로 <App/> 감싸기

 

3. 리액트 라우터 활용하기

[ Routes / Route ]

function App() {
  let [shoes, setShoes] = useState(data);
  let navigate = useNavigate();

  return (
    <div className="App">
      <Routes>
       <Route path="/notice" element={ <h4>공지입니다.</h4> } />
       <Route path="/event" element={<Event />} />
       <Route path="/about/*" element={<About />} />
       <Route path="/detail/:id" element={<Detail shoes={shoes} />} />
       <Route path="*" element={ <div>없는 페이지임</div> } />
      </Routes>      
    </div>
  );
}

function About() {
  return (
    <div>
      <h4>about 페이지임</h4>
      <Routes>
        `<Route path="/member" element={<div>멤버들</div>} />
        <Route path="/location" element={<div>회사위치</div>} />`
      </Routes>
    </div>
  )
}

function Event() {
  return (
    <div>
      <h4>오늘의 이벤트</h4>
      <Outlet></Outlet>
    </div>
  )
}

 

(1) Route 1 : event

  - Route의 기본 형태

(2) Route 2 : event/ Route 3 : about

  => Nested routes : 여러 유사한 페이지 필요할 때 사용

<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />

  -> Nested routes를 사용하지 않은 경우

 

  - Route 2 : event

    -> Outlet 사용

  - Route 3 : about

    -> Outlet 없이 서브 페이지 라우팅

   ** <Outlet>  : 라우터의 충첩 경로에서 중첩된 라우트를 렌더링하기 위해 사용되는 컴포넌트

 

(3) Route 4 : detail

<Route path="/detail/0" element={<Detail shoes={shoes} />} />
<Route path="/detail/1" element={<Detail shoes={shoes} />} />
<Route path="/detail/2" element={<Detail shoes={shoes} />} />

  -> URL 파라미터를 사용하지 않은 경우

     ( URL 파라미터에 대한 설명은 하단에서 확인 )

 

(4) Route 5 : *

  -> 이 Route를 추가해주면 일치하는 Route가 없는 경우 처리

 

[ Link / Navigate ]

(1) Link

  - 링크 이동

  - a 태그 생성 -> 그냥 누르면 가게 하는 것

<Link to="/">HOME</Link>
<Link to="/about">About</Link>
<Link to="/event">Event</Link>

 

(2) Navigate

  - 페이지 이동을 도와주는 hook

  - 어떠한 조건을 만족했을 때, 이동을 할 수 있도록 하는 것

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

function App() {
  let navigate = useNavigate();

  return (
    <div className="App">
      <button onClick={()=>{ navigate('/about') }}>About</button>
      <button onClick={()=>{ navigate('/event') }}>Event</button>
    </div>
  );
}

 

 

[ URL 파라미터 ]

- App.js

import Detail from './routes/Detail';
<Route path="/detail/:id" element={<Detail shoes={shoes} />} />

 

상세페이지처럼 같은 화면에 대하여 페이지를 여러 개 만들고 싶은 경우 URL 파라미터 사용

url 파라미터는 여러개 사용가능 => /detail/:id/:name/:eng

 

- Detail.js

import { useParams } from 'react-router-dom'

function Detail() {
	let {id} = useParams();
    
    return (
    	<div className="container">
        	<h4>{idx.title}</h4>
            <p>{idx.content}</p>
        </div> 
    )
}

App.js에서 url 파라미터 값(id)를 가져오려면? useparams()

## 코딩애플 React part2 강의 내용 ##

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

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