React
입력값과 상태 연결하기
제어 입력은 상태를 value로 표시하고 onChange로 다음 값을 저장합니다.
이럴 때 필요해요
이름을 입력하면 같은 이름이 화면에 나타나도록 만듭니다.
어떻게 동작하나요?
input에 value를 전달하면 React 상태가 입력창에 표시할 값을 결정합니다. 사용자가 입력할 때 onChange에서 새 값을 상태에 저장해야 다음 글자가 화면에 반영됩니다.
아래 label은 input을 감싸 이름을 설명합니다. name의 초기값은 빈 문자열이고 입력할 때 e.target.value로 현재 문자열을 읽습니다.
입력값을 화면에 보여 주는 것과 서버에 제출하는 것은 별개입니다. 실제 예매 폼에서는 유효성 검사, 제출 중 표시와 실패 처리 등을 추가로 설계합니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
import { useState } from "react";
export default function Guest() {
const [name, setName] = useState("");
return <><label>이름<input value={name} onChange={e => setName(e.target.value)} /></label>
<p>예매자: {name}</p></>;
}입력한 문자열이 예매자 문단에도 표시됩니다.
자주 헷갈리는 포인트
- value만 주고 onChange 처리를 빠뜨리면 입력을 갱신할 수 없습니다.
- 입력 중 문자열과 제출 후 서버 검증 결과를 같은 상태로 취급하지 않습니다.
내 말로 설명해 보기
value와 onChange 중 하나만 있으면 같은 흐름이 될까요?
생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- 제어 입력은 상태를 value로 표시하고 onChange로 다음 값을 저장합니다.
- 입력한 문자열이 예매자 문단에도 표시됩니다.
예시 답변
value는 표시할 값을, onChange는 새 입력을 저장하는 동작을 담당합니다. 이 제어 입력 예제에서는 두 연결이 함께 필요합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.