리액트에서 부모 라우트의 컴포넌트 실행을 자식 라우트에서 방지하기

문제 상황 설명

리액트에서 라우팅을 사용할 때, 부모 라우트의 컴포넌트가 자식 라우트에 접근할 때마다 실행되는 문제가 있다. Stack Overflow의 질문에서는 이러한 문제를 어떻게 해결할 수 있는지에 대해 이야기가 나왔습니다. 여기에서는 React Router 라이브러리를 사용한 예제를 중심으로 문제 해결 방법을 상세히 설명합니다.

해결 방법 1: useEffect와 useLocation 활용

첫 번째 방법은 React의 useEffect와 useLocation 훅을 사용하는 것입니다. useEffect는 컴포넌트가 마운트되거나 업데이트될 때 실행되는 코드를 정의할 수 있습니다. useLocation은 현재 라우트의 위치 정보를 제공합니다.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function ParentComponent() {
  const location = useLocation();

  useEffect(() => {
    if (location.pathname === '/parent') {
      // 부모 라우트일 때만 실행되는 코드
    }
  }, [location]);
}

위의 예제에서 useEffect 내부의 코드는 location.pathname이 ‘/parent’와 일치할 때만 실행됩니다. 이로 인해 자식 라우트에 접근했을 때 부모 컴포넌트의 코드가 실행되지 않습니다.

해결 방법 2: 자식 라우트에서 조건부 렌더링

두 번째 방법은 자식 라우트의 컴포넌트에서 조건부 렌더링을 사용하는 것입니다. 예를 들어, 부모 라우트의 컴포넌트에 렌더링 되는 부분을 자식 라우트에서 조건적으로 렌더링할 수 있습니다.

function ParentComponent() {
  return (
    <div>
      {window.location.pathname === '/parent' && (
        // 부모 라우트일 때만 보여지는 컴포넌트나 내용
      )}
    </div>
  );
}

위의 예제에서는 window.location.pathname을 사용해 현재 라우트가 부모 라우트인지 확인하고, 조건에 맞을 때만 특정 컴포넌트나 내용을 렌더링합니다.

정리

이 문서에서는 리액트에서 부모 라우트의 컴포넌트가 자식 라우트에 접근할 때마다 실행되는 문제를 해결하는 두 가지 방법을 소개했습니다. useEffect와 useLocation을 활용한 방법과 자식 라우트에서의 조건부 렌더링을 활용한 방법입니다. 이러한 방법들을 통해 리액트 어플리케이션의 효율성을 높일 수 있습니다.