React 상에서 컨디션 렌더링을 위해 사용하는 "&&" 에 대한건

안녕하세요. 오늘은 React에서 조건에 따라 렌더링을 다르게하고 싶을 때 사용하는 "&&" 연산자를 알아보고 올바른 조건 렌더링(conditional rendering) 작성법을 알아보겠습니다.

 

우리는 React 애플리케이션을 보면서 props와 state에 따라 component를 조건부 렌더링하는 방법에 대해서 알고 있습니다. 보통 "&&" 연산자를 많이 사용하실 겁니다. 하지만 아시는 분은 아시겠지만 "&&" 연산자를 사용하면 원치않는 UI 버그를 발견할 수 있습니다. 이제 아래에서 좀 더 자세히 살펴보겠습니다.

 

전통적으로 "&&" 연산자를 사용하는 방법에 대해 먼저 알아볼까용?

function ExampleComponent({ condition }) {
  return (
    <div>
      <h1>Example</h1>
      {condition && <ConditionalComponent />}
    </div>
  );
}

위의 코드에서와 같이 "&&" 연산자를 사용해서 조건부로 특정 component(<ConditionalComponent />) 를 렌더링 할 수 있습니다. 만약 condition 이 true 이면 <ConditionalComponent /> 가 렌더링 되며, condition 이 false 이면 <ConditionalComponent /> 가 렌더링 되지 않습니다.

이러한 동작방식은 React 에 국한된 작동법이 아닌 short-circuit evaluation 이라고 불리는 Javascript 및 기타 프로그래밍 언어의 동작 방식입니다. 즉, condition 이 false 이면 and operation 인 "&&" 의 진행이 멈추고 두 번째 operand인 <ConditionalComponent /> 를 실행하지 않습니다.

 

그렇다면 왜 "&&" 연산자를 사용하면 안될까요?

보통 "&&" 연산자는 사용하기 쉽기 때문에 자주 사용됩니다. 그런데 여기에는 함정이 도사리고 있습니다. 위의 코드의 경우 condition 은 true 혹은 false 만을 나타내는 boolean type 입니다. 그런데 만약 condition 의 type 이 boolean 이 아니라면 문제가 발생합니다.

Condition type이 number 이며, 0을 나타낸다면, 0 이 UI 상에 보이게 될 겁니다. 이는 우리가 예상하지 못한 결과를 나타낼 수 있습니다. 또한 condition 이 undefined 라면 error를 일으키게 됩니다. 이러한 문제가 발생하기 때문에 조건부 렌더링을 작성하고자할 때 React 에서 "&&" 연산자 사용을 지양합니다.

 

그러면 "&&" 연산자 대신 무엇을 사용해야 할까요?

의도하지 않은 무언가를 UI 상에 보여주고 싶지 않을 때(0과 같은) Javascript의 삼항 연산자를 사용하면 됩니다.

condition ? <ConditionalComponent /> : null;

위와 같이 "&&" 연산자 대신 삼항 연산자를 사용하여 의도치않은 UI 버그를 사전에 방지할 수 있습니다.

 

결론

개발을 하면서 의도하지 않은 UI 버그를 사전에 방지하려면 React component 의 조건부 렌더링에 AND 연산자인 "&&" 대신 삼항 연산자를 사용하면 됩니다.