Conditional Rendering

React에서는 if문, &&, ? : 연산자와 같은 JavaScript 구문을 사용해서 JSX를 조건부로 렌더링할 수 있다.

 

조건부 JSX 반환

if문

if문을 사용하면 조건에 따라 다음과 같이 조건부 렌더링이 가능하다.

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

 

 

삼항 연산자

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

 

 

논리 AND 연산자(&&)

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

 

해당 연산자에 대한 설명은 이미 전에 정리한 포스팅이 있으므로 아래 참고 바란다

(조건부 렌더링에 대한 설명 링크)

 

 

JSX를 변수에 조건부로 할당

위에서는 if문을 통해서 바로 조건에 따라 JSX를 반환해주었지만, 이 방법은 조건에 따라서 JSX를 저장하는 변수에 JSX를 저장해서 마지막에 반환해주는 방식이다. 코드가 더 깔끔히 보일 수 있다.