React에서 조건부 렌더링

서론

 React에서 조건부 렌더링은 상황에 따라 특정 UI 요소를 표시하거나 숨기는 데 중요한 역할을 한다. 사용자가 인터페이스와 상호작용하거나 애플리케이션 상태가 변경될 때, 특정 요소를 렌더링할지 여부를 결정해야 할 때가 많다. 이 글에서는 조건부 렌더링의 여러 방법에 대해 살펴본다.

null을 반환하여 아무것도 렌더링하지 않기

 UI를 구성하다 특정 조건이 충족될 때 아무것도 렌더링하지 않기를 원할 수 있다. 예를 들어, 사용자가 선택하지 않은 항목은 목록에서 아예 보이지 않도록 하고 싶을 때가 있다. React 컴포넌트는 항상 무언가를 반환해야 하므로, 이 경우 null을 반환하면 된다.

function Item({ name, isPacked }) {
  if (isPacked) {
    return null;
  }
  return <li className="item">{name}</li>;
}

 이 코드에서는 isPacked가 true일 때, 컴포넌트는 null을 반환하여 아무것도 렌더링하지 않는다. 그렇지 않으면 리스트 아이템이 렌더링된다. 이 방식은 간단하지만, 코드의 중복이 발생할 수 있다. 예를 들어, className을 변경해야 할 때 코드의 여러 부분을 수정해야 한다. 이럴때는 삼항 연사자를 사용할 수 있다.

삼항 연산자 사용하기

JavaScript에는 조건부 표현식을 작성하는 간단한 방법인 삼항 연산자(? :)가 있다. 이를 사용하면 조건에 따라 다른 내용을 렌더링할 수 있다. 예를 들어, isPacked가 true일 때 아이템 이름 뒤에 체크마크를 표시하고 싶다면 다음과 같이 작성할 수 있다:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? name + ' ✔' : name}
    </li>
  );
}

이 코드는 isPacked가 true이면 name + ' ✔'을 렌더링하고, 그렇지 않으면 name을 렌더링한다. 삼항 연산자는 짧고 간결한 코드 작성에 유용하다.

삼항 연산자와 조건문 비교

 객체 지향 프로그래밍에 익숙한 사람들은 위의 두 가지 방법이 엄밀히 같은 코드는 아니라고 생각할 수 있다. 하지만 JSX 요소는 인스턴스가 아니며 내부 상태를 가지지 않기 때문에 두 방법은 완전히 동일하다. JSX 요소는 실제 DOM 노드가 아닌, 가벼운 설명서(blueprint)와 같다. 따라서 두 방법은 React에서 동일하게 동작한다.

논리 AND(&&) 연산자 활용하기

 또 자주 사용되는 조건부 렌더링 방식은 JavaScript의 논리 AND(&&) 연산자다. React 컴포넌트에서 &&를 사용하면 조건이 참일 때만 특정 JSX를 렌더링하고, 그렇지 않으면 아무것도 렌더링하지 않도록 할 수 있다.

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

 이 코드에서는 isPacked가 true일 때만 체크마크(✔)를 렌더링한다. isPacked가 false일 경우에는 아무것도 렌더링되지 않는다.

조건부 렌더링 시 주의할 점

 조건부 렌더링을 사용할 때 주의해야 할 점은 JavaScript가 좌변을 boolean으로 자동 변환하면서 발생할 수 있는 오류다. 예를 들어, 다음과 같은 코드를 작성했다고 가정해보자:

function Notification({ messageCount }) {
  return (
    <div>
      {messageCount && <p>New messages</p>}
    </div>
  );
}

 여기서 messageCount가 0일 때 아무것도 렌더링되지 않을 것이라고 예상할 수 있다. 하지만 실제로는 숫자 0이 렌더링된다. React는 숫자 0을 그대로 화면에 표시하기 때문이다.

 이 문제를 해결하려면 좌변이 boolean 값이 되도록 작성해야 한다:

function Notification({ messageCount }) {
  return (
    <div>
      {messageCount > 0 && <p>New messages</p>}
    </div>
  );
}

 이제 messageCount가 0보다 클 때만 "New messages"가 렌더링되고, 그렇지 않으면 아무것도 렌더링되지 않는다.