리액트 useNavigate(), Nested Routes, Outlet 정리

🔍 useNavigate() 란?

useNavigate()는 Hook의 종류로서, 페이지 이동을 도와주는 함수이다.

❓ Link와 차이점은 무엇인가 ❓

Link 는 특정 주소로 이동해주는 태그였다면, useNavigate() 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 한다.

즉 Link는 HTML에서 a태그 같이 바로 주소 이동을 하도록 하는 컴포넌트라면, useNavigate()는 페이지 이동시에 추가로 로직을 처리해주는 컴포넌트다.

🔍 useNavigate() 사용법

1. useNavigate 임포트 해오기

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

2. useNavigate() 불러오기

let navigate = useNavigate();

3. 해당 태그에 이벤트 등록

<Nav.Link onClick={() => {navigate('/Detail')}}>Detail</Nav.Link>

Detail 창을 클릭하면 해당 페이지로 이동한다.

❗️navigate('경로') 안에 navigate(1), navigate(-1)같이 숫자를 넣어줌으로써 한 페이지 앞으로 이동이나 뒤로 한페이지 이동 같은 기능을 구현 할 수 있다 ❗️

---

🔍 404 페이지 만들기

만약에 사용자가 /Detail235342 같이 해당 사이트에서 존재하지 않는 페이지를 접속한다고 했을때 없는 페이지에 접속했다는 창을 띄어보자.

- 라우트 내에서 경로 ' * ' 로 지정해주기

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

저 ' * ' 의 뜻은 Route 경로로 만들어 놓은 주소 외의 모든 것을 뜻하기 때문에, 만들어놓지 않은 페이지로 접속 했을때 잘못 접속했다는 창을 띄울 수 있다.

없는 페이지라는 문구가 나오는 걸 확인할 수 있다.

---

🔍 Nested Routes 만들기

예를 들어서 About이라는 사이트의 정보를 담은 페이지를 만들었다고 가정하자.
근데 About/member 나 About/location 같이 정보를 담은 페이지 안에서 또 나뉠 수 있는 새로운 페이지를 만들고 싶을때 사용하는 것이 Nested Routes 문법이다.

  <Routes>
        <Route path="/About" element={<About/>} />
        <Route path="/About/member" element={내용} />
        <Route path="/About/location" element={내용} />
 </Routes>

이런식으로 하나하나 다 만들어 줄 수 있겠지만 이렇게 작성하기 보다

<Routes>
        <Route path="/About" element={<About />}>
          <Route path="member" element={내용} />
          <Route path="location" element={내용} />
        </Route>
</Routes>

// About 컴포넌트

function About() {
  return (
    <div>
      <h4>About 페이지입니다</h4>
    </div>
  );
}

이런식으로 Route 태그 안에 들어갈 상세 페이지들을 넣어주는 식으로 작성한다.

이렇게 작성함으로써 얻는 장점은

• 라우터를 작성하는 방식이 더 간결해질 수 있다.
• /About/member로 접속한다고 가정했을때, /About 안에 있는 Element와 /member 안에 있는 Element 총 2개의 Element를 합쳐서 보여준다.

하지만 /About/location 이나 /About/member 에 접속해도 About창에 해당되는 내용만 렌더링 된다. 저 member와 location 라우터들은 About 라우터에 포함되는 것이기 때문에 About 컴포넌트 안에서 어디에 저 포함되는 라우터들을 띄울 것인지 작성해주어야한다.

❗️ 이럴때 사용 되는 것이 Outlet 이다 ❗️

---

🔍 Outlet 사용하기

Outlet은 간단히 말하자면 구멍이라고 할 수 있다.

Outlet(구멍)을 만들어줌으로써 저 member, location 라우터 안에 있는 내용들을 Outlet 안으로 넣어주는 것이다

function About() {
  return (
    <div>
      <h4>About 페이지입니다</h4>
      <Outlet></Outlet>
    </div>
  );
}

Element 들이 합쳐져서 나오는것을 볼 수 있다.

❗️ 즉 Outlet은 Nested Routes들의 Element 들을 보여주는 자리다 ❗️

여러 유사한 페이지들을 구현할때 유용하게 사용할 수 있을 것 같다.