React에서 체크박스 작업하기

체크박스 작업도 비슷한 원칙으로 수행되며, value 속성 대신 checked 속성을 지정합니다. 이 속성에 true를 전달하면 체크박스가 선택되고, false를 전달하면 선택되지 않습니다:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> 선택됨
		<input type="checkbox" checked={false} /> 선택 안 됨
	</div>;
}

일반적으로 checked 속성에는 논리값을 포함하는 상태가 전달됩니다:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} />
	</div>;
}

입력 필드 작업과 마찬가지로, checked 속성 값을 하드코딩하면 체크박스 상태를 변경할 수 없습니다. 정상적으로 작동하려면 체크박스가 변경될 때 그 상태를 반대 값으로 변경해야 합니다:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // 상태 반전
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

다음과 같이 단순화할 수 있습니다:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
	</div>;
}

삼항 연산자를 사용하여 체크박스 상태를 단락에 출력해 보겠습니다:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>상태: {checked ? '선택됨' : '선택 안 됨'}</p>
	</div>;
}

체크박스, 버튼 및 단락이 주어집니다. 버튼을 클릭할 때 체크박스가 선택되어 있으면 단락에 사용자에게 인사하는 텍스트를 출력하고, 선택되어 있지 않으면 작별 인사 텍스트를 출력하세요.

세 개의 체크박스를 사용하여 사용자에게 알고 있는 언어(html, css, js)를 선택하도록 요청하세요. 각 언어에 대한 선택 결과는 별도의 단락에 출력하세요.