[react] 조건부 렌더링

packing list를 packing 했는지 안했는지에 따라 조건부로 렌더링 하려고 합니다.

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

export default function PackingList() {
  return (
    <ul>
      <Item
    	isPacked={true}
		name="cloth"
	  />
      <Item
        isPacked={false}
        name="notebook"
   	  />
      <Item
        isPacked={true}
        name="pencil"
   	  />
	</ul>
  )
}  

if/else문

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

삼항 조건 연산자

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? name + ' ✔' : name}    // isPacked가 참이면 이름과 ✔를, 거짓이면 이름만 렌더링해라.
	</li>
  )
}

논리 AND 연산자 (&&)

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}    // isPacked가 참이면 ✔ 를 렌더링해라.
    </li>
  )
}

&&의 왼쪽에 숫자를 두면 안됩니다.
0 이면 false가 되어 아무것도 렌더링 하지 않을 것을 기대하겠지만,
실제로는 0 자체를 렌더링 해버리게 됩니다.

변수에 조건부로 JSX를 할당

변수를 하나 정의하고, if문을 사용하여 변수를 재할당하는 방법입니다.

function ItemList() {
  let itemContent = name;

  // 변수에 값 재할당
  if (isPacked) {
    itemContent = name + '✔';
  }
  
  // 변수에 JSX도 재할당 할 수 있음.
  if (isPacked) {
    itemContent = (
      <del>
        {name + " ✔"}
      </del>
    );
  }
  
  return (
    <li className="item">
      {itemContent}
	</li>
  )
}