조건부렌더링

• 이모지 단축키 : 윈도우키 + . (마침표) 

if 조건문 사용하여 렌더링

예제)

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="우주복" 
        />
        <Item 
          isPacked={true} 
          name="황금잎이 달린 헷멧" 
        />
        <Item 
          isPacked={false} 
          name="가족사진" 
        />
      </ul>
    </section>
  );
}

=> if 문을 사용하여 조건에 맞게 렌더링 시킨다.

=>isPacked가 true이면 '✔'가 나온다. (isPacked가 false인 가족사진은 체크가 뜨지 않을 것이다!!!)

 

삼항연산자로 중복 줄이기

import './App.css';

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

export default function PackingList() {
  return (
    <section>
      <h2>샐리의 라이딩 짐 목록</h2>
      <ul>
        <Item isPacked={true} name="우주복" />
        <Item isPacked={true} name="황금잎이 달린 헷멧" />
        <Item isPacked={false} name="가족사진" />
      </ul>
    </section>
  );
}

 

+ 삼항연산자로 조건에 따른 클래스 동적으로 추가 가능

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