React 공식문서 - Conditional Rendering(조건부 렌더링)

컴포넌트는 서로 다른 조건에 따라 다른 것을 렌더링 해야하는 경우가 있고, if문, &&, ? : 연산자와 같은 JavaScript 문법을 사용할 수 있다.

---

Conditionally returning JSX(조건부로 반환하는 JSX)

 

JavaScript의 if/else 문을 사용해서 JSX를 조건부로 반환할 수 있다.

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

---

Conditionally returning nothing with null(null을 사용해 조건부로 아무것도 반환하지 않기)

 

아무 것도 렌더링하고 싶지 않을 때는 null을 반환하면 된다.(일반적으로 권장되는 방법은 아니다.)

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

// isPacked가 true인 Item 컴포넌트는 렌더링되지 않음
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>
  );
}

 

 

---

Conditionally (ternary) operatior(? :)

 

위의 예제들을 좀 더 간결하게 표현할 때는 JavaScript의 조건(삼항) 연산자를 사용할 수 있다.

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

 

---

Logical AND operator(&&)(논리 AND 연산자(&&)

 

JavaScript의 AND(&&)논리 연산자는 React 컴포넌트 내에서 조건이 참일 때 일부 JSX를 렌더링하거나 그렇지 않으면 아무것도 렌더링 하지 않으려 할 때 자주 사용한다.

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

&& 표현식은 왼쪽(조건)이 true면 오른쪽의 값을 반환하고, false일 경우에는 표현식 전체가 false가 된다.

 

* && 표현식 왼쪽에 숫자를 넣지 마세요

만약 왼쪽이 0 인 경우 React는 빈 값 대신 0을 렌더링한다.

messageCount && <p>New messages</p> 이 코드에서 messageCount가 0일 때 아무것도 렌더링 하지 않는다고 생각하기 쉽지만, 실제로는 0 자체를 렌더링한다. (messageCount가 0보다 큰 경우에만 렌더링을 하려는 의도대로라면 messageCount > 0 && <p>New messages</p> 이 코드를 작성하면 된다.)

---

 

Conditionally assigning JSX to a variable(변수에 조건부로 JSX 할당하기)

 

let 키워드로 정의된 변수는 재할당할 수 있으므로, 표시할 기본 콘텐츠를 할당하고, 조건에 따라 재할당하는 방법을 사용할 수도 있다.

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

---

* 참고 : React 공식문서(https://react-ko.dev/learn)