React 상태의 논리값

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

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

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

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

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

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

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

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

클릭 시 사용자를 차단하는 버튼과 클릭 시 사용자 차단을 해제하는 버튼을 만드세요.

이전 문제를 수정하여 항상 해당 버튼만 보이게 하세요. 즉, 사용자가 차단된 경우 차단 해제 버튼이 보이고, 차단되지 않은 경우 차단 버튼이 보이게 하세요.