icon안동민 개발노트

조건부 렌더링

 조건부 렌더링은 React 애플리케이션에서 동적 UI를 구현하는 핵심 기술입니다.

 특정 조건에 따라 다른 컴포넌트나 요소를 렌더링하여 사용자 경험을 향상시킬 수 있습니다.

 이 절에서는 React에서 사용할 수 있는 다양한 조건부 렌더링 기법을 살펴보겠습니다.

1. if 문을 사용한 조건부 렌더링

 가장 기본적인 방법으로, 컴포넌트의 렌더링 로직 내에서 if 문을 사용하여 조건에 따라 다른 JSX를 반환할 수 있습니다.

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign in.</h1>;
}

 장점

  • 가독성이 좋음
  • 복잡한 조건을 처리하기 쉬움

 단점

  • JSX 내부에서 직접 사용할 수 없음

 적절한 사용 상황 : 조건이 복잡하거나 여러 개의 요소를 조건부로 렌더링해야 할 때

2. 삼항 연산자 사용

 JSX 내에서 직접 조건부 렌더링을 할 때 유용한 방법입니다.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please sign in.</h1>
      )}
    </div>
  );
}

 장점

  • JSX 내에서 인라인으로 사용 가능
  • 간단한 조건을 표현하기에 적합

 단점

  • 조건이 복잡해지면 가독성이 떨어질 수 있음

 적절한 사용 상황 : 간단한 조건부 렌더링, 특히 JSX 내에서 직접 조건을 처리해야 할 때

3. && 연산자를 이용한 단축 평가

 조건이 참일 때만 특정 요소를 렌더링하고 싶을 때 유용합니다.

function Notification({ message }) {
  return (
    <div>
      {message && <p>{message}</p>}
    </div>
  );
}

 장점

  • 매우 간결한 문법
  • 조건이 거짓일 때 아무것도 렌더링하지 않음

 단점

  • 조건이 0일 때 0이 렌더링될 수 있음 (falsy 값 주의)

 적절한 사용 상황 : 조건이 참일 때만 요소를 렌더링하고, 거짓일 때는 아무것도 렌더링하지 않아야 할 때

4. switch 문을 활용한 다중 조건 렌더링

 여러 가지 조건에 따라 다른 컴포넌트를 렌더링해야 할 때 유용합니다.

function StatusMessage({ status }) {
  switch (status) {
    case 'loading':
      return <LoadingSpinner />;
    case 'success':
      return <SuccessMessage />;
    case 'error':
      return <ErrorMessage />;
    default:
      return null;
  }
}

 장점

  • 여러 조건을 깔끔하게 처리할 수 있음
  • 각 케이스를 명확하게 구분할 수 있음

 단점

  • 컴포넌트 내부에 많은 로직이 포함될 수 있음

 적절한 사용 상황 : 여러 가지 상태나 조건에 따라 완전히 다른 컴포넌트를 렌더링해야 할 때

5. 객체를 이용한 조건부 렌더링

 여러 조건에 따른 렌더링을 객체로 매핑하여 처리할 수 있습니다.

const MESSAGES = {
  loading: <LoadingSpinner />,
  success: <SuccessMessage />,
  error: <ErrorMessage />
};
 
function StatusMessage({ status }) {
  return MESSAGES[status] || null;
}

 장점

  • 코드가 간결해짐
  • 새로운 상태 추가가 용이함

 단점

  • 복잡한 조건을 처리하기 어려울 수 있음

 적절한 사용 상황 : 상태에 따라 렌더링할 컴포넌트가 미리 정의되어 있고, 자주 변경되지 않을 때

6. 고차 컴포넌트를 이용한 조건부 렌더링

 특정 조건에 따라 컴포넌트를 렌더링하거나 숨기는 로직을 재사용할 수 있습니다.

function withAuth(WrappedComponent) {
  return function({ isLoggedIn, ...props }) {
    if (isLoggedIn) {
      return <WrappedComponent {...props} />;
    } else {
      return <p>Please log in to view this content.</p>;
    }
  }
}
 
const ProtectedComponent = withAuth(SensitiveData);

 장점

  • 조건부 렌더링 로직을 재사용할 수 있음
  • 관심사의 분리가 잘 이루어짐

 단점

  • 컴포넌트 구조가 복잡해질 수 있음

 적절한 사용 상황 : 여러 컴포넌트에 동일한 조건부 렌더링 로직을 적용해야 할 때

 조건부 렌더링은 React 애플리케이션의 동적 UI를 구현하는 데 필수적인 기술입니다. 각 방법은 상황에 따라 장단점이 있으므로, 컴포넌트의 복잡성, 재사용성, 가독성 등을 고려하여 적절한 방법을 선택해야 합니다.

 간단한 조건의 경우 삼항 연산자나 && 연산자를 사용하고, 복잡한 조건이나 여러 상태를 처리해야 할 때는 if 문이나 switch 문을 사용하는 것이 좋습니다.

 또한, 동일한 조건부 렌더링 로직이 여러 곳에서 반복된다면 고차 컴포넌트나 커스텀 훅을 통해 로직을 추상화하는 것도 고려해볼 만합니다.

 이러한 다양한 기법을 적절히 활용하면, 더 유연하고 유지보수가 쉬운 React 애플리케이션을 개발할 수 있습니다.

이전으로다음으로