[React] 공통 레이아웃 적용 예시 (Outlet 사용)

Layout 만들기

// Layout.js
function Layout() {
    return (
        <div>
            <Header />
            <div>
                <Outlet /> // --> 여기에 콘텐츠가 들어갈 예정
            </div>
            <Footer />
        </div>
    );
}

 

Layout 모든 페이지에 적용하기

// App.js
function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
            <Route element={<Layout />}> // --> 여기에 추가
                <Route path="/" element={<Main />}></Route>
                <Route path="/page">
                  <Route path="" element={<Page />}></Route>
                  <Route path=":id" element={<PageDetail />}></Route>
                </Route>
            </Route>
            <Route path="*" element={<NotFound />}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

• 원하는 루트에 추가하면 된다
  • 나는 NotFound 페이지를 제외하고 Layout을 적용했다!

 

<Outlet />에 props 전달하려면

다른 것과 같이 아래처럼 작성했더니 동작하지 않았다

<Outlet count={count} setCount={setCount} />

 

이 때 useOutletContext를 이용하면 된다!

// Outlet을 사용하는 부모 컴포넌트
function Parent() {
    const [count, setCount] = useState(0);
    return <Outlet context={[count, setCount]} />; // context ={} 사용
}

// 자식 컴포넌트
import { useOutletContext } from "react-router-dom";

function Child() {
    const [count, setCount] = useOutletContext(); // 여기서 useOutletContext 사용
    console.log(count) // => 0
}

 

---

참고 사이트

• https://reactrouter.com/en/main/hooks/use-outlet-context