[TIL] 다양한 조건 연산자로 JSX렌더링

if문

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

isPacked가 true이면 체크모양을 표시하고
isPacked가 false이면 체크모양을 표시하지 않는다.

삼항연산자 (? :)

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

if문과 동일한 렌더링을 하지만
많이 간결해 진다.
isPacked가 true이면 name과 체크아이콘을 렌더링하고
isPacked가 false이면 name만 렌더링한다.

논리 AND 연산자(&&)

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

삼항 연산자 보다 더 단축해서 사용할 수 있는 방법이 논리 AND 연산자(&&)이다.
논리 AND 연산자(&&)는 React 컴포넌트 내에서 조건이 참일 때 일부 JSX를 렌더링하거나 그렇지 않으면 아무것도 렌더링하지 않으려 할 때 자주 사용된다. &&를 사용하면 isPacked가 true 일 때만 조건부로 체크 표시를 렌더링할 수 있다.

react에서 조건부 렌더링이 세상 편한거같다. 일반적인 html css javascript에서 힘들게 html 객체를 생성하고 붙이고 때고 하는일들이 많이 간결해진다.