[개념] Conditional rendering

예제

링크

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

배운 개념

단락평가

📌 개념

• && 연산은 첫 번째 값이 False 일 때,
• || 연산은 첫 번째 값이 True 일 때
• 뒤에 값과는 상관없이 무조건 각각 False와 True를 반환하게 되어 뒤에 연산은 진행하지 않는다.

📌 활용

//'👍' 리턴을 의도할 수 있음. 
return (true && '👍')

//'🎉' 리턴을 의도할 수 있음. 
return (false || '🎉')

//예제
//name 뒤에 재고가 있으면 '✔' 표시되도록 의도함.
{name} {isPacked && '✔'}

JSX 문법

📌 li 태그 안에 여러개의 JavaScript를 넣을 때 각각을 중괄호로 감싸고 구분자 없이 넣는다(?)

<li className="item">
      {name} {isPacked && '✔'}
</li>