Conditional Rendering Component (조건부 렌더링)을 위한 컴포넌트

React Conditional Rendering

React 개발을 하다 보면, 특정 조건에 따라 다른 컴포넌트를 렌더링해야 할 경우가 자주 발생합니다. 이런 상황을 효율적으로 처리하기 위해, 여러분이 직접 조건부 렌더링을 수행하는 ConditionalComponent를 만드는 방법을 알아보겠습니다. 특히, TypeScript를 사용하여 타입 안정성을 유지하면서도 사용하기 쉽고 직관적인 구조를 제공하는 방법에 초점을 맞추겠습니다.

기존의 조건부 렌더링(Conditional Rendering) 방식

React에서는 보통 && 연산자 또는 삼항 연산자를 사용하여 조건부 렌더링을 수행합니다.

• && 연산자를 사용하는 경우, 조건이 참일 때만 컴포넌트를 렌더링합니다. 예: condition && <Component />
• 삼항 연산자를 사용하는 경우, 조건에 따라 두 개의 다른 컴포넌트 중 하나를 선택하여 렌더링합니다. 예: {condition ? <TrueComponent /> : <FalseComponent />}

이 방식들은 간단하고 직관적이며, 많은 경우에 잘 작동합니다. 하지만, 두 방식 모두 컴포넌트의 재사용성을 높이고, 더 복잡한 조건부 렌더링 로직을 관리하는 데 있어서 한계가 있습니다.

React Dev — Conditional Rendering.

ConditionalComponent 소개

ConditionalComponent는 주어진 조건에 따라 두 개 중 하나의 컴포넌트를 렌더링하는 React 컴포넌트입니다. 하지만 단순히 두 컴포넌트 중 하나를 선택하는 것이 아니라, 각 컴포넌트에 전달될 props도 함께 관리할 수 있는 방식을 제공합니다. 이 접근 방식은 다음과 같은 이점을 제공합니다:

• 타입 안정성: TypeScript와 함께 사용할 때, 각 컴포넌트에 전달되는 props의 타입을 명확하게 지정할 수 있어, 더 안정적인 코드를 작성할 수 있습니다.
• 재사용성과 유연성 향상: 조건부 렌더링 로직을 하나의 컴포넌트에 캡슐화함으로써, 다른 컴포넌트에서 동일한 로직을 쉽게 재사용할 수 있습니다.

1차 구현 방식

<ConditionalComponent
    condition={true} // 혹은 어떤 조건
    trueComponent={<div>True 상황일 때 보여줄 컴포넌트입니다.</div>}
    falseComponent={<div>False 상황일 때 보여줄 컴포넌트입니다.</div>}
/>

• 만약 condition이 true로 평가된다면, <div>True 상황일 때 보여줄 컴포넌트입니다.</div>만 렌더링되고, falseComponent는 렌더링되지 않습니다.
• 반대로, condition이 false로 평가된다면, <div>False 상황일 때 보여줄 컴포넌트입니다.</div>만 렌더링되고, trueComponent는 렌더링되지 않습니다.
• 이 방식의 단점은 조건과 상관없이 두 컴포넌트 모두 생성 프로세스를 거친다는 점입니다. 따라서, 두 컴포넌트 중 하나만 생성하는 것이 성능상 더 효율적인 경우가 있을 수 있으며, 이런 상황에서는 컴포넌트 대신 컴포넌트 생성 함수를 조건부로 호출하는 방식을 고려할 수 있습니다.

최종 구현 방식

interface ComponentWithProps<T> {
  component: React.ComponentType<T>;
  props: T;
}

interface ConditionalComponentProps<T, F> {
  condition: boolean | (() => boolean);
  trueComponentWithProps: ComponentWithProps<T>;
  falseComponentWithProps: ComponentWithProps<F>;
}

const ConditionalComponent = <T, F>({
  condition,
  trueComponentWithProps,
  falseComponentWithProps,
}: ConditionalComponentProps<T, F>) => {
  const shouldRenderTrueComponent = typeof condition === 'function' ? condition() : condition;

  const ComponentToRender = shouldRenderTrueComponent
    ? trueComponentWithProps.component
    : falseComponentWithProps.component;
  const componentProps = shouldRenderTrueComponent
    ? trueComponentWithProps.props
    : falseComponentWithProps.props;

  return <ComponentToRender {...componentProps} />;
};

기존 방식과의 차이점

장점

• 타입 안정성: 각 컴포넌트와 그 props의 타입을 명확히 지정할 수 있습니다.
• 재사용성: 조건부 렌더링 로직을 하나의 컴포넌트 안에 캡슐화함으로써, 코드의 중복을 줄이고 재사용성을 높일 수 있습니다.
• 유연성: 더 복잡한 조건부 렌더링 로직도 관리하기 쉽습니다.

단점

• 간결성: 기존 방식에 비해 약간 더 많은 코드가 필요할 수 있습니다.
• 학습 곡선: 이 방식을 처음 접하는 개발자에게는 다소 낯설 수 있습니다.

마무리

ConditionalComponent를 사용하는 방법은 React에서 조건부 렌더링을 처리하는 강력하면서도 유연한 방법을 제공합니다. TypeScript와 함께 사용하면 타입 안정성을 유지하면서도, 다양한 요구 사항에 맞게 컴포넌트를 쉽게 조정할 수 있습니다. 이제 여러분도 이 기법을 사용하여 보다 효율적인 React 애플리케이션을 개발할 수 있을 것입니다.