✏️ React Router의 중첩라우팅, Outlet 사용하기

 

 

Outlet을 배우기전에 먼저 알아야 할 내용

React Router에 대해서 작성한 글이다.

react-router-dom의 연장선이기 때문에 이것을 먼저 숙지하고 사용해야 한다.

✏️ React의 Router 사용하기, react-router-dom

 

 

 

 

---

 

 

 

 

Outlet이 뭔가요?

페이지를 구성할 때, 모든페이지에 `Header` 와 `Footer`이 나온다고 가정해보면,

나중에 사용자가 잘못된 페이지로 들어갔을때 뜨는 컴포넌트와, `Header`와 `Footer`를 제외한 페이지를 만들고 싶을 때가 있다.

그럴때 고려해서 만드는 것이 `Outlet`이다.

이것은 `중첩 라우팅`이라고도 정의하고, 먼저 중첩 라우팅이 뭔지 파악해보자.

 

 

 

중첩라우팅이 뭔가요?

중첩라우팅은 컴포넌트의 `children`과 같은 개념이라고 생각하면 쉽다.
중첩라우팅이란 라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라, 여러 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법이다.

 

뭔말인지 모르겠다. 그냥 예시 코드 ㄱㄱ

 

 

 

 

예시 코드

<BrowserRouter>
    <Header />
    <Routes>
        <Route path='/' element={<Main />} />
        <Route path='/detail' element={<Detail />} />
    </Routes>
</BrowerRouter>

 

react-router-dom에 대한 라우팅 구성을 해둔 상태다.

이렇게 구성하면 `Header`컴포넌트는 모든 페이지에서 보여주게 된다.

 

 

하지만 내가 원하는 페이지에 `Header`,`Footer`를 없애고 싶은데?

나 Detail 페이지에서는 `Header`랑 `Footer`안보이게 하고싶어!

라고 할때 `Outlet`을 사용한다.

 

 

 

 

 

제대로 사용해보기

const Router = () => {
	return (
    	<BrowserRouter>
            <Routes>
            	<Route path = "/" element = {<Home />}>
                    <Route path="testA" element = {<TestA />} />
                    <Route path="testB" element = {<TestB />} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
};

export default Router;

 

먼저 예시 코드를 작성하자면, 이렇게 구성되어 있다.

`Home` 컴포넌트에서 `TestA`, `TestB`로 이동 했을 때

`path`에 맞게 TestA와 TestB를 보여줄 것이다.

중첩하는 자식라우팅은 `path`에 `/`는 제외하고 작성해준다.

 

 

 

 

 

 

TestA와 TestB의 컴포넌트 구성

const TestA = () => {
  return (
    <div>
      <h1>Test A 페이지 입니다.</h1>
    </div>
  );
};

export default TestA;

 

const TestB = () => {
  return (
    <div>
      <h1>Test B 페이지 입니다.</h1>
    </div>
  );
};

export default TestB;

 

구성은 간단하게 이렇게 작성했다.

 

 

 

 

 

 

Home 컴포넌트 구성

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

const Home = () => {
  return (
    <>
      <div>
        <h1>Test1</h1>
        <Outlet /> //TestA
        <h2>Test2</h2>
        <Outlet /> //TestB
      </div>
      <div>
        <h1>Outlet에 대해서 알아보기</h1>
      </div>
    </>
  );
};

export default Home;

 

`Home` 컴포넌트에서는 import 로 `Outlet`을 가져온다.

 

 

 

 

 

Home 컴포넌트 호출 시 결과페이지

Test1
Test2
Outlet에 대해서 알아보기

 

 

 

 

 

/testA 링크로 이동했을 때 결과 페이지 (주석으로 TestA에 Outlet 적어둔 곳)

Test1
Test A 페이지 입니다.
Test2
Outlet에 대해서 알아보기

 

 

 

 

 

/testB 링크로 이동했을 때 결과 페이지 (주석으로 TestB에 Outlet 적어둔 곳)

Test1
Test2
Test B 페이지 입니다.
Outlet에 대해서 알아보기

 

 

 

결론

한번 테스트로 연습해서 만들어보면 이해하기 쉽다.

원하는 곳에 라우팅이 가능하다.

이제 응용할 일만 남았다!

 

 

 

---

 

 

✨ upgrade

이제 실전으로 내가 만들고 있는 페이지에 기본 구성을 잡아보았다.

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

const App = () => {
  return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route
              index
              element={<Home />}
            />
            <Route
              path="/detail/:id"
              element={<Detail />}
            />
          </Route>

          <Route
            path="/login"
            element={<Login />}
          />
        </Routes>
      </BrowserRouter>
  );
};

export default App;

 

 

이 코드를 보면 `Home`컴포넌트에서는 `path`대신 `index`를 넣어 주었고,

`Route`를 `Home`, `Detail` 컴포넌트로 감싸주었다.

그리고 `Home`과 `Detail`의 컴포넌트의 부모의 `Route`는, `/` 최상위 루트를 가지고 있다. (Layout 컴포넌트가 보인다.)

 

 

 

 

 

Layout 컴포넌트

import { Outlet } from "react-router-dom";

const Layout = () => {
  return (
    <div>
      <p>여기가 네비게이션 바 보여줄거임!</p>
      <Outlet />
    </div>
  );
};

export default Layout;

 

 

`Layout`컴포넌트는 이렇게 구성되어 있다.

Outlet으로 넣어주면, `Home`화면에서는 이제 네비게이션 바가 보일 것이다.

 

 

 

---

 

 

Docs

Outlet v6.26.1 | React Router