React에서 radio 다루기

radio radio 작업은 예를 들어 체크박스와는 약간 다릅니다. 문제는 여러 개의 라디오가 동일한 state를 공유하지만 서로 다른 value를 가진다는 점입니다.

따라서 작업은 다음과 같은 방식으로 이루어집니다: 각 라디오 버튼의 value 속성에 자신의 값을 기록하고, checked 속성에는 state가 특정 값과 같은지 확인하는 특별한 조건을 기록합니다. 만약 같다면 라디오 버튼이 선택된 상태가 되고, 같지 않다면 선택되지 않은 상태가 됩니다.

다음은 설명한 내용의 구현입니다:

function App() {
	const [value, setValue] = useState(1);
	
	function changeHandler(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input
			type="radio"
			name="radio"
			value="1"
			checked={value === '1' ? true : false}
			onChange={changeHandler}
		/>
		<input
			type="radio"
			name="radio"
			value="2"
			checked={value === '2' ? true : false}
			onChange={changeHandler}
		/>
		<input
			type="radio"
			name="radio"
			value="3"
			checked={value === '3' ? true : false}
			onChange={changeHandler}
		/>
	</div>
}

3개의 라디오 버튼이 주어져 있습니다. 문단이 주어져 있습니다. 선택된 라디오 버튼의 값이 이 문단에 출력되도록 만드세요.

라디오 버튼을 사용하여 사용자에게 좋아하는 프로그래밍 언어를 물어보세요. 사용자의 선택을 문단에 출력하세요. 만약 JavaScript 언어가 선택되었다면, 사용자를 칭찬하세요.