React Router 와 상태관리

라우트는 흔히 “페이지 이동”으로 설명된다. /login에서 /dashboard로 이동하는 것, 주소가 바뀌고 화면이 바뀌는 것.

이 설명이 틀리지는 않지만, React Router를 깊이 쓰기 시작하면 어딘가 부족하다는 감각이 생긴다. 라우트를 페이지로만 이해하는 순간, 레이아웃은 중복되고, 상태는 흩어지고, UI는 조건문으로 얽힌다.

반대로 라우트를 state로 바라보기 시작하면, <Outlet />과 중첩 라우트는 전혀 다른 의미를 갖는다.

라우트는 결국 “현재 애플리케이션이 어떤 상태에 있는가”에 대한 선언이다. URL은 그 상태를 외부로 드러내는 직렬화된 값이다.

/dashboard/settings/profile이라는 경로는 단순한 문자열이 아니라, “대시보드 컨텍스트 안에 있고, 설정 상태이며, 그중에서도 프로필 화면을 보고 있다”는 상태 표현이다.

이 관점에서 보면 라우트는 props나 전역 상태와 크게 다르지 않다. 다만 차이가 있다면, 라우트는 브라우저 히스토리와 결합된 상태이고, 뒤로 가기, 새로 고침, 공유 가능성까지 포함한 상태라는 점이다.

React Router의 중첩 라우트는 이 상태를 계층적으로 표현하는 방식이다. 상위 라우트는 상위 상태를, 하위 라우트는 그 안의 세부 상태를 의미한다.

/dashboard는 “대시보드 상태”이고, /dashboard/settings는 “대시보드 상태 안에서 설정을 보고 있는 상태”이다. /dashboard/settings/profile은 그 상태의 더 구체적인 분기다.

이 구조는 UI와 정확히 맞물린다. 대시보드에 들어오면 헤더와 사이드바는 유지된다. 설정으로 들어가면 설정용 레이아웃이 추가된다. 프로필을 클릭하면, 그 안의 내용만 바뀐다.

이때 중요한 것은, 상위 상태가 유지된다는 점이다. 라우트가 바뀌어도 전체 UI가 리셋되지 않는다. 상태가 “이동”하는 것이 아니라, 정제되고 구체화된다.

<Outlet /> 은 이 계층적 상태가 UI로 드러나는 지점이다. <Outlet /> 은 단순한 placeholder가 아니다.“이 상태 안에서 다음 상태가 들어올 자리”를 선언하는 컴포넌트다.

대시보드 레이아웃에서 <Outlet />을 렌더링한다는 것은, “대시보드라는 상태는 고정이고, 그 안의 세부 상태만 바뀔 수 있다”는 의미다.

설정 레이아웃의 <Outlet /> 은 “설정이라는 상태는 유지한 채, 그 안의 분기만 교체된다”는 선언이다. 이렇게 보면 <Outlet />은 렌더링 위치라기보다 “상태 경계”에 가깝다.

이 관점은 조건부 렌더링과 라우팅의 차이를 분명하게 만든다. 조건문은 상태를 내부에서 관리한다. 라우트는 상태를 외부로 노출한다.

if (tab === "profile")로 분기하는 UI는 현재 어떤 상태인지 코드 안에서만 알 수 있다. 하지만 /settings/profile이라는 라우트는 그 상태를 URL로 고정하고, 히스토리에 남기고, 공유할 수 있게 만든다.

라우트를 state로 본다는 것은, “이 UI 상태는 충분히 중요해서 주소를 가질 가치가 있다”고 판단하는 일이다.

이 관점은 CSR과 SSR에서도 그대로 유지된다. CSR에서는 라우트 상태가 브라우저에서 계산된다. SSR에서는 그 상태 계산을 서버가 대신 수행한다.

다시 말하면 <Outlet />의 의미는 변하지 않는다는 것이다. CSR에서는 “클라이언트가 채우는 상태 자리”이고, SSR에서는 “서버가 이미 채워 둔 상태 자리”일 뿐이다.

즉 <Outlet />은 렌더링 전략의 문제가 아니라, 상태 구조의 문제다.

React Router를 단순한 페이지 전환 도구로 쓰는 동안에는 <Outlet />이 불편하게 느껴질 수 있다. 왜 굳이 한 단계를 더 거쳐야 하는지 의문이 들 수도 있다. 하지만 라우트를 state로 보기 시작하면, <Outlet />은 오히려 가장 정직한 표현이 된다. 상위 상태는 유지되고, 하위 상태만 교체된다. 그리고 그 경계가 코드로 명시된다.

결국 React Router가 제공하는 것은 “URL 기반 네비게이션”이 아니라 상태를 계층적으로 모델링하는 방법이다. <Outlet />은 그 모델이 UI로 투영되는 지점이다. 라우트를 상태로 바라보는 순간, 중첩 라우트는 복잡함이 아니라 구조가 될 수도 있다.