React 상태의 논리값

제품이 장바구니에 있는지 여부를 나타내는 상태 inCart를 만들어 봅시다:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    
  </div>;
}

값 false는 제품이 장바구니에 없음을, 값 true는 장바구니에 있음을 의미한다고 합시다. 삼항 연산자를 사용해 이 정보를 출력해 봅시다:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? '장바구니에 있음' : '장바구니에 없음'}</span>
  </div>;
}

이제 클릭하면 제품이 장바구니에 추가되는 버튼을 만들어 봅시다:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? '장바구니에 있음' : '장바구니에 없음'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

첫 번째 클릭 시 장바구니에 추가되고 두 번째 클릭 시 장바구니에서 제거되도록 코드를 수정해 봅시다:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? '장바구니에 있음' : '장바구니에 없음'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}