State & Props 영상에서 state는 Toggle Switch나 Counter처럼 컴포넌트 내부에서 변할 수 있는 값이라고 하였습니다. 실제 애플리케이션에서는 무엇이 "상태"라고 할 수 있을까요? 쇼핑몰 장바구니를 예로 들어보겠습니다. 사용자는 구매할 물건과 당장은 구매하지 않을 물건을 체크박스에 체크하여 구분 짓습니다. 이를 장바구니 내에서의 상태로 구분해 본다면 check 된 상태와 check 되지 않은 상태입니다.
체크박스를 코드로 구현해 보면 아래와 같습니다. 아래 예시에서는 단순히 체크된 상태에 따라 보이는 글씨가 달라지지만, 이를 쇼핑몰에 적용하면 체크 여부에 따라 구매할 물건의 개수나 구매 금액이 변경되고, 이에 따라 사용자의 화면 또한 달라집니다. 이처럼 컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 합니다.
Open Sandbox 버튼을 클릭하면 큰 화면에서 확인할 수 있습니다.
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
// isChecked: useState를 사용하여 담을 수 있는 변수
// setIsChecked: isChecked를 변경할 수 있는 함수
const handleChecked = (event) => {
setIsChecked(event.target.checked);
};
return (
<div className="App">
<input type="checkbox" checked={isChecked} onChange={handleChecked} />
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
</div>
);
}
export default CheckboxExample;