[React] 10. 라우팅-2 (useNavigate, 404page, Nested Routes, Outlet)

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용)

3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component)

4. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 4. 동적인 UI 제작하기

5. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 5. 반복되는 부분 축약하기 (map)

6. 2023.05.29 - [🌌 | WEB DEV/React] - [React] 6. props

7. 2023.07.03 - [🌌 | WEB DEV/React] - [React] 7. 이미지 삽입하기(css, html, public폴더에서 가져오기)

8. 2023.07.06 - [🌌 | WEB DEV/React] - [React] 8. 다른 파일에서 데이터 가져오기

9. 2023.07.09 - [🌌 | WEB DEV/React] - [React] 9. 라우팅-1 (react-router-dom세팅, Routes, Route, Link)

 

 

저번 포스트에 이어서 React의 라우팅에 대해서 좀 더 알아보자.

 

0. 세팅

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

 

지난 번 import한 것에 추가로 useNavigate와 Outlet을 가져온다.

 

 

1. useNavigate

페이지 이동기능을 만들기 위해서 사용하는 함수이다.

 

Link의 경우 a태그를 생성하는 방식으로 페이지를 전환하는 방식이었다.

 

useNavigate()라는 훅의 경우 경로를 인자값로 전달하면 해당 path로 이동을 한다.

또한 숫자를 전달할 경우, 현재 기준 뒤로 가기, 앞으로 가기를 구현할 수 있다.

( + : 앞 / - : 뒤 )   ex)  -1 : 뒤로 1번 | 1: 앞으로 한번

 

 

예시

function App(){
  return(
    ...
    
    let navigate = useNavigate();
    <>
      ...
      
      <div onClick={ navigate('/경로') }></div> //클릭 이벤트 -> 페이지 이동
    </>
  )
}

 

이처럼 onClick 등의 이벤트리스너에 함수를 등록하여 활용할 수 있다.

 

 

2. 404 페이지

존재하지 않는 path에 접근할 경우 클라이언트가 요청한 내용을 서버에서 찾을 수 없다는 에러코드인 404를 반환한다.

이에 대한 정보를 유저에게 알려주는 페이지를 만들기 위해서는 아래와 같이 구현한다!

 

<Route path="*" element={ ... }/>

 

*를 이용해 지정한 path 외 모든 것에 대한 접근 요청에 대해 404페이지를 반환할 수 있다.

 

 

예시

<Route path='*' element={
  <div className="error404">
    없는 페이지입니다.
  </div> 
}></Route>

 

 

 

3. Nested Routes (서브경로 문법)

 

path 설정을 할 때 예를 들어 about/info, about/history 이러한 형태로 페이지를 구성하고 싶은 경우

즉, 서브 경로를 만들고 싶은 경우가 있다. 

이때에는 아래와 같은 방법들을 이용할 수 있다.

 

1) 직관적으로 입력하는 방법

먼저 Nested Routes 문법을 사용하지 않는 경우에는 아래와 같이 구현한다.

 

예시

<Route path="/about/info" element={ ... } />
<Route path="/about/history" element={ ... } />

 

이 방식은 서브 경로로 접근할 때 부모 경로에 존재하는 요소는 보이지 않고

서브 경로에 지정한 요소들만 반환한다.

 

 

2) Nested Routes 문법 활용하는 방법

하나의 <Route>의 내부에 여러 개의 <Route>를 넣어주는 방법이 바로 Nested Routes 문법이다.

 

<Route path="/about" element={ 
  <>
    <Outlet/>
  </> }>
  <Route path="info" element={ ... } />
  <Route path="history" element={ ... } />
</Route>

 

이 방식은 부모 경로의 요소까지 함께 반환한다.

이때 주의할 점은 부모 경로의 요소에서 서브 경로의 요소가 존재할 위치를 명시해야한다.

 

 

<Outlet/> 태그를 이용해 그 위치를 지정한다.

 

 

두 방법의 차이점)

부모&서브 경로 모두	Nested Routes 문법
서브 경로의 요소만 반환	부모 경로 & 서브 경로 요소 모두 반환

 

3) Nested Routes 문법을 어디에?

-> 동적인 UI 만들기!

 

이 방법은 부모 경로의 요소는 유지되지만 서브 경로의 요소만 전환된다.

즉, 페이지 내에서 일부만 조금씩 바뀌어야 할 때 이 방법을 사용할 수 있다.

ex) 페이지 내 목록 조회 등

 

또한 뒤로가기 버튼을 이용할 수 있고, 페이지 이동이 쉽다는 장점을 이용해 다양하게 활용할 수 있다!