input 값을 state로 관리하는 방법

input 값을 state로 관리하는 방법에서 먼저 볼 부분

React에서는 input의 value를 state와 연결하고, onChange에서 state를 업데이트해 입력값을 관리합니다.

입력값을 state로 관리하면 화면의 다른 부분에서 같은 값을 즉시 사용할 수 있습니다. 미리보기, 검증 메시지, 제출 데이터 구성에 유용합니다.

value만 넣고 onChange를 빼면 읽기 전용처럼 동작할 수 있습니다. 입력 가능한 controlled input에는 두 속성이 함께 필요합니다.

폼이 커지면 각 입력값을 개별 state로 둘지 객체 하나로 관리할지 선택해야 합니다. 처음에는 단순한 구조부터 시작하는 것이 좋습니다.

이름 입력 미리보기

function NameForm() {
  const [name, setName] = React.useState("");

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>입력한 이름: {name}</p>
    </div>
  );
}

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

React 글은 화면 조각, 데이터 흐름, 상태 변경 시점을 나누어 읽으면 헷갈림이 줄어듭니다.

값이 부모에서 내려오는지, 컴포넌트 내부에서 바뀌는지 구분하면 props와 state 관련 오류를 훨씬 빨리 찾을 수 있습니다.

작은 예제라도 렌더링 전후에 화면이 왜 바뀌는지 설명할 수 있어야 다음 단계의 Hook을 이해하기 쉽습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• input value와 state를 연결하기
• onChange에서 setter 호출하기
• 이벤트 객체의 target.value 사용하기
• 빈 문자열 초기값을 준비하기