React에서 부모 라우트와 자식 라우트 동작 방식 이해하기

StackOverflow 질문 개요

질문자는 React 애플리케이션에서 라우팅을 구현할 때, 특정 자식 라우트에 접근하면 그에 상응하는 부모 라우트의 컴포넌트도 함께 렌더링되는 문제에 직면했습니다. 이러한 동작 방식은 원치 않는 사이드 이펙트를 초래할 수 있기 때문에 이를 어떻게 해결할 수 있을지에 대한 답을 찾고자 했습니다.

라우트란 무엇인가?

라우트는 웹 페이지의 특정 부분을 나타냅니다. 예를 들어, /home이라는 URL은 홈페이지를, /profile은 프로필 페이지를 나타낼 것입니다. React에서는 react-router-dom 라이브러리를 통해 라우팅을 쉽게 구현할 수 있습니다.

부모와 자식 라우트의 동작 방식

React에서 라우팅 구조는 부모-자식 관계를 가질 수 있습니다. 이 때, 자식 라우트에 접근하면 부모 라우트의 컴포넌트도 함께 렌더링되는 것이 기본 동작입니다. 이는 때로는 유용할 수 있지만, 모든 경우에 적합하지는 않습니다.

해결책: exact 속성 사용

react-router-dom에서 제공하는 <Route> 컴포넌트에는 exact라는 속성이 있습니다. 이 속성을 사용하면 경로가 완전히 일치할 때만 해당 컴포넌트를 렌더링합니다. 예를 들어, /parent와 /parent/child가 있을 때, exact 속성을 /parent에 적용하면 /parent/child에 접근했을 때 /parent는 렌더링되지 않습니다.

추가 해결책: 조건부 렌더링

useRouteMatch 또는 useLocation과 같은 React Router의 훅을 사용하여 현재 경로를 가져온 후, 조건부 렌더링을 적용할 수 있습니다. 이 방식을 사용하면, 특정 자식 라우트에 접근했을 때 부모 라우트 컴포넌트가 렌더링되지 않도록 제어할 수 있습니다.

예외 상황: Switch 컴포넌트

Switch 컴포넌트를 사용하는 경우에도 주의가 필요합니다. Switch는 여러 Route 중 하나만 렌더링하도록 하는 컴포넌트입니다. 만약 exact가 설정되지 않은 상태에서 Switch를 사용하면, 예상치 못한 라우트가 렌더링될 수 있습니다.

정리

부모 라우트와 자식 라우트의 동작 방식을 이해하고 적절한 해결책을 적용하면, 더 효율적인 라우팅 구조를 구현할 수 있습니다. exact 속성이나 조건부 렌더링을 통해 불필요한 렌더링을 제어할 수 있으며, Switch 컴포넌트 사용시 주의가 필요합니다.