[ React 공식문서 ] UI 구상하기 (6) : 조건부 렌더링

 

컴포넌트는 서로 다른 조건에 따라 다른 것을 보여줘야 하는 경우가 종종 발생한다

1. 조건부로 반환하는 JSX

• 상품이 포장됐는지를 표시하는 여러 <Item/> 컴포넌트를 렌더링하는 <PackingList /> 컴포넌트가 있다고 가정해보자.

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

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

• 여기서 Item 컴포넌트에 isPacked prop 이 true 인 경우, 패킹된 아이템에 체크 표시를 추가하고자 한다면 if/else 구문으로 렌더링할 수 있을 것

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

• 위 방법은 isPacked 값이 true 면 다른 JSX 트리를 반환하게 된다.

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

---

2. null 을 사용해 어떤 조건에서는 아무것도 반환하지 않기

• 어떤 상황이 됐을 때 아무것도 렌더링하고 싶지 않은 경우라면, 위의 경우 packing 되지 않은 아이템은 아예 표시하고 싶지 않다면 null 을 반환하면 된다

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

• 다만, 이렇게 null 을 리턴하여 렌더링하겠다 명시하는 것은 일반적이지 않다
• 부모 컴포넌트의 JSX 에 컴포넌트를 조건부로 포함하거나 제외하는 경우가 많다

---

3. 조건을 포함한 JSX

• 조건부 렌더링에서 아래의 코드는 중복이 많다

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

• 이런 경우에는조건부 연산자를 활용해 DRY(Don’t Repeat Yourself) 한 코드를 작성할 수 있다.

---

4. 삼항 연산자 사용하기

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

• 객체 지향 프로그래밍에 익숙하다면 첫 번째 조건부 렌더링 방식이 서로 다른 인스턴스를 반환하기에 미묘하게 두 코드가 다를 수 있다고 생각할 수 있다.
• 하지만 JSX 요소는 내부 state 를 보유하지 않고, 실제 DOM 노드가 아니다
• 즉, 두 예제는 사실상 완전히 동등하다

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

• 또, 삼항 연산자에서 각 항에 단순히 변수만 넣는 것이 아니라 마크업 언어 혹은 다른 JSX 구문을 넣을 수 있다
  • 다만 코드가 너무 지저분해보일 수 있기에 깔끔하게 정리해서 하나의 표현 방식을 사용할 것을 권장

---

5. 논리 (&&) 연산자

• 또 다른 방법으로 논리 연산자가 존재한다
• A && B 는 A 가 true 일 때 B 를 반환하고 false 라면 A 를 반환한다

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

• 만약 isPacked 가 false 인 경우에는 JSX 에서 트리상의 구멍으로 간주하여 그 자리에 아무것도 렌더링하지 않는다
• 다만, 이 방식은 JavaScript 의 falsy 한 값들에 대해 모두 동일하게 동작하지 않는다.
• 만약 isCount 가 0일 <Count /> 컴포넌트를 렌더링하고 싶다면

return isCount && <Count />

• 이렇게 작성하고 싶을 수 있지만, JSX 에서의 논리 연산에서는 0 도 true 로 간주하므로 <Count /> 를 렌더링한다. 그러므로 실제 isCount 가 0일 때 렌더링하고 싶지 않다면 명확히 명시하는 것이 좋다

---

Reference

https://react.dev/learn/conditional-rendering

Conditional Rendering – React

https://react-ko.dev/learn/conditional-rendering

조건부 렌더링 – React