React 메모: 중첩 라우팅과 커스텀 훅

React Router v6 중첩 라우팅으로 레이아웃 공유하기

기존에는 라우트를 나열하고 페이지마다 헤더·푸터를 넣고 있었다.

<Routes>
  <Route path="/" element={<Main />} />
  <Route path="/rooms/:roomId" element={<RoomDetail />} />
  <Route path="/orders/:orderId" element={<Payment />} />
  <Route path="/orders/:orderId/complete" element={<CompletePayment />} />
</Routes>

중첩 라우팅으로 바꾸면 공통 레이아웃을 부모 라우트 하나에 두고, 자식 페이지는 <Outlet /> 자리에 렌더링된다.

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

const Layout = () => (
  <Container>
    <Header />
    <Outlet />
    <Footer />
  </Container>
);

export const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Main /> },
      { path: 'rooms/:roomId', element: <RoomDetail /> },
      { path: 'orders/:orderId', element: <Payment /> },
      { path: 'orders/:orderId/complete', element: <CompletePayment /> },
    ],
  },
]);

• 라우트를 그룹으로 묶기 쉽고, 레이아웃이 한 곳에서 관리된다.
• 레이아웃 컨테이너에 최대 너비(예: 768px)를 지정해 두면 페이지마다 따로 맞출 필요가 없다.
• 라우트마다 헤더 모양이 다르다면, 레이아웃을 여러 개 만들어 라우트 그룹마다 다르게 쓰거나 헤더가 props·라우트 정보를 받아 유연하게 바뀌도록 만든다.

커스텀 훅은 상태가 아니라 로직을 공유한다

같은 커스텀 훅을 두 컴포넌트에서 호출하면, 각 컴포넌트가 자기만의 상태를 갖는다. 커스텀 훅이 공유하는 것은 상태를 다루는 로직이지 상태 자체가 아니다.

function useCounter() {
  const [count, setCount] = useState(0);
  return { count, increase: () => setCount((c) => c + 1) };
}

function A() {
  const { count } = useCounter(); // A만의 count
}
function B() {
  const { count } = useCounter(); // B만의 count (A와 무관)
}

여러 컴포넌트가 같은 값을 봐야 한다면 상태를 공통 부모로 올리거나, Context·상태 관리 라이브러리(Zustand 등)·서버 상태 라이브러리(TanStack Query)를 쓴다.