Chapter 1. Describing the UI

#6 조건부 렌더링

학습 목차

1. 조건부로 반환하는 JSX
2. null을 사용해 조건부로 아무것도 반환하지 않기
3. 조건을 포함한 JSX
4. 조건(삼항) 연산자(? :)
5. 논리 AND 연산자(&&)
6. 변수에 조건부로 JSX 할당하기

---

KeyNote

• 컴포넌트는 서로 다른 조건에 따라 다른 것을 보여줘야 하는 경우가 자주 발생한다.
• React에서는 if 문, &&, ? : 연산자 같은 JavaScript 문법을 사용해 조건부로 JSX를 렌더링할 수 있다.

1. 조건부로 반환하는 JSX

• JavaScript의 if와 return 문으로 분기 로직을 어떻게 생성하는지 확인하자.
• React에서 조건과 같은 제어 흐름은 JavaScript로 처리된다.
• Boolean 값에 따라 true 일 때, false 일 때 두 상황에서 다른 JSX 트리를 반환한다.
  이를 if/else 문으로 작성 가능하다.

2. null을 사용해 조건부로 아무것도 반환하지 않기

• 어떤 상황에서는 아무것도 렌더링하고 싶지 않을 수도 있다.
  예를 들어, 포장된 아이템을 전혀 표시하고 싶지 않다고 가정한다면, 컴포넌트는 무언가를 반환해야 한다. 이 경우 null을 반환하면 된다.

// 예시

function Item({ name, isPacked }) {
  if (isPacked) {
    return null;
  }
  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>
  );
}

• 실제로 컴포넌트에서 null을 반환하는 것은 렌더링하려는 개발자를 당황하게 할 수 있기 때문에 일반적이지는 않다.
• 부모 컴포넌트의 JSX에 컴포넌트를 조건부로 포함하거나 제외하는 경우가 더 많다.

3. 조건을 포함한 JSX

• 중복을 해도 상관은 없지만 코드를 유지보수하기 어렵게 만들 수 있다.
• className을 변경하려면 코드의 두 곳에서 변경해야 한다.
• 이런 상황에서는 조건부로 약간의 JSX를 포함시켜 코드를 더 DRY하게(덜 반복적이게) 만들 수 있습니다.

4. 조건(삼항) 연산자(? :)

// 예시

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

• ”isPacked가 참이면 (?) name + ' ✔'를 렌더링하고, 그렇지 않으면 (:) name을 렌더링하라” 라고 읽을 수 있다.
• 이 스타일은 간단한 조건에 적합하지만 적당히 사용하자.
  중첩된 조건 마크업이 너무 많아 컴포넌트가 지저분해지면 자식 컴포넌트를 추출하여 정리하는 것을 고려해야 한다.
• React에서 마크업은 코드의 일부이므로 변수나 함수와 같은 도구를 사용해 복잡한 표현식을 정리할 수 있다.

5. 논리 AND 연산자(&&)

• 또 다른 일반적인 단축표현으로 JavaScript AND(&&) 논리 연산자가 있다.
• React 컴포넌트 내에서 조건이 참일 때 일부 JSX를 렌더링하거나 그렇지 않으면 아무것도 렌더링하지 않으려 할 때 자주 사용된다.

// 예시

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

• 이는 “만약 isPacked이면 (&&) 체크 표시를 렌더링하고, 그렇지 않으면 아무것도 렌더링하지 않는다.” 로 읽을 수 있다.
• JavaScript && 표현식은 왼쪽(조건)이 true이면 오른쪽(이 경우 체크 표시)의 값을 반환한다.
  하지만 조건이 false이면 표현식 전체가 false가 된다.
• React는 false를 null이나 undefined와 마찬가지로 JSX 트리상의 “구멍”으로 간주하고, 그 자리에 아무것도 렌더링하지 않는다.

주의

• &&의 왼쪽에 숫자를 넣으면 안된다.
  -조건을 테스트하기 위해, JavaScript는 왼쪽을 자동으로 불리언으로 변환한다.
  그러나 왼쪽이 0이면 전체 표현식이 해당 값(0)을 가져오고, React는 기꺼이 빈 값 대신 0을 렌더링한다.
  • 예를 들어, 흔히 하는 실수 중 하나는 messageCount && <p>New messages</p>와 같은 코드를 작성하는 것이다.
    messageCount가 0일 때 아무것도 렌더링하지 않는다고 생각하기 쉽지만, 실제로는 0 자체를 렌더링한다.
• 이 문제를 해결하려면 왼쪽을 아래 예제와 같이 불리언으로 만들면 된다.
  messageCount > 0 && <p>New messages</p>

6. 변수에 조건부로 JSX 할당하기

• 단축키가 일반 코드를 작성하는 데 방해가 된다면 if 문과 변수를 사용하자.
  let으로 정의된 변수는 재할당할 수 있으므로, 표시할 기본 콘텐츠인 이름을 지정하는 것부터 시작하자.
• if 문을 사용하여 isPacked가 true면 JSX 표현식을 itemContent에 재할당하고, 중괄호는 “JavaScript로의 창”을 연다.
• 중괄호로 변수를 반환된 JSX 트리에 삽입하여 이전에 계산된 표현식을 JSX 안에 중첩시킨다.

// 예시

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = name + " ✔";
  }
  return (
    <li className="item">
      {itemContent}
    </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>
  );
}

• 이 스타일은 가장 장황하지만 가장 유연하기도 하고, 텍스트뿐만 아니라 임의의 JSX에서도 작동한다.

• JavaScript에 익숙하지 않다면 처음에는 이 다양한 스타일이 복잡해 보일 수 있다.
  하지만 이 스타일들을 익히면 React 컴포넌트뿐 아니라 모든 JavaScript 코드를 읽고 작성하는 데 도움이 크게 된다.

• 우선 선호하는 스타일을 선택한 다음, 다른 스타일이 어떻게 작동하는지 잊어버렸다면 이 레퍼런스를 다시 참조하자.

---

요약

• React에서는 JavaScript로 분기 로직을 제어한다.
• if문으로 조건부로 JSX 표현식을 반환할 수 있다.
• 중괄호를 사용하여 일부 JSX를 변수에 조건부로 저장한 다음 다른 JSX 안에 포함할 수 있다.
• JSX에서 {cond ? <A /> : <B />}는 “cond가 있으면 <A />를 렌더링하고, 그렇지 않으면 <B />를 렌더링하라”를 의미한다.
• JSX에서 {cond && <A />}는 ”cond가 있으면 <A />를 렌더링하고, 그렇지 않으면 아무것도 렌더링하지 말라”를 의미한다.
• 이 단축용법은 흔히 쓰이지만, 만약 if를 선호한다면 굳이 사용하지 않아도 된다.

---

React 공식 문서

https://react.dev/

React 비공식 번역 문서

https://react-ko.dev/

MDN

https://developer.mozilla.org/ko/