조건부 렌더링 처리 방식

지헌·2025년 10월 29일

Frontend Fundamentals 사이트에 있는 조건부 렌더링 처리, 다들 어떻게 처리하시나요? 글을 읽다가 흥미로운 내용이 있어 정리해볼려고한다.

🔥 주요 논점

논리 연산자 vs. 선언적 컴포넌트: 직관적인 코드 vs. 일관된 패턴 유지
TypeScript에서 타입 안전성: 컴포넌트가 타입 좁히기를 방해할 수도?
렌더링 성능 고려: 컴포넌트가 Short-circuiting을 보장할까?
일관된 컨벤션 유지: 한 프로젝트에서 다양한 방식이 혼용될 때의 문제

조건부 렌더링 처리가 있는데 보통 대부분 아래와 같이 논리연산자나 삼항연산자를 많이 사용하는데

하지만 글을 읽다보니 처음 보는 컴포넌트를 사용하여 선언적인 방식으로 조건부 렌더링이 구현이 가능하다는 것을 알게되었다.

const Component = () => {
  return (
      /**
       * 조건이 true일 경우 <A />를 렌더링합니다.
       * 조건이 false일 경우 null을 반환합니다 (렌더링하지 않음).
       */
      <If condition={someCondition}>
        <A />
      </If>
  );
};

추가적으로 사람들의 의견을 봤을 때

더 다양한 방법이 있었다.

1. 단일 항목 단일 조건일 경우에는 삼항연산자나 논리연산자 사용

function Example(){
  return isLoading && <Loading/>
}

2. 단일 항목 복수 조건일 경우 switch

functino Example(){
 switch(state){
  case "READY":
     return <Ready/>;
  case "PROGRESS":
     return <Progress/>;
  case "DONE":
     return <Done/>;
}

3. 복수 항목 복수 조건일 경우 컴포넌트 작성

function Example(){
  <AccessManager country={["KR", "US", "JP"]} version="2.6.10" fallback={<Fallback/>}>
      <Content/>
  </AccessManager>
}

이렇게 가독성 측면에서 접근하여 조건부 렌더링을 작성할 수 있다고한다.

하지만 반대 의견으로는 <IF /> 컴포넌트를 사용했을 때 JavaScript에서 Short-circuiting이 보장되지 않는다. 그래서 TypeScript에서 그 하위의 children에서 타입이 좁혀지지 않게되어서 타입 안전성을 포기하게 된다.

value값이 null이나 undefined가 아닌 경우에만 값: {value}을 렌더링하는 jsx 코드로 예시를 들어본다면

<If condition={value != null}>
  <span>값: {value}</span>
</If>

Short-circuiting(단락 평가)이란?

논리 연산자(&&, ||)가 불필요한 연산을 생략하는 동작 방식을 의미하는데 보통 if문을 간단하게 줄일 때 자주 사용되고, React JSX에서도 조건부 렌더링으로 자주 사용된다.

true && "Hello"   // "Hello"
false && "Hello"  // false
true || "Hello"   // true
false || "Hello"  // "Hello"

// JavaScript의 논리 연산자(&&, ||)가 왼쪽 피연산자의 값에 따라 오른쪽을 평가하지 않고 “일찍 멈추는” 특성