React 입력창에 글자가 안 써질 때: value와 onChange 제어 입력 확인

입력창이 보이는데 키보드로 글자를 써도 바로 사라진다. <input value={keyword} />처럼 값을 고정해 두면 React는 화면의 값을 keyword와 맞추려 한다. 사용자가 타이핑한 값을 상태에 돌려주지 않으면 다음 렌더에서 원래 값이 다시 보인다. 이 경우 입력창이 고장 난 것이 아니라 입력값을 누가 관리하는지가 빠진 것이다.

value가 있으면 React 상태가 입력값의 기준이 된다

도식의 화살표는 입력 → onChange → 상태 → value로 되돌아오는 한 바퀴를 만든다. value만 연결하고 상태를 갱신하지 않으면 이 순환이 끊겨 사용자가 입력해도 화면 값이 바뀌지 않는다.

제어 입력은 현재 값을 상태 변수에 두고, 사용자 입력이 들어올 때 그 상태를 갱신한다. 아래 예제에서는 입력창과 미리보기 문구가 같은 keyword를 읽는다.

import { useState } from 'react';

export default function SearchDraft() {
  const [keyword, setKeyword] = useState('');

  return (
    <section>
      <label htmlFor="keyword">검색어</label>
      <input
        id="keyword"
        name="keyword"
        value={keyword}
        onChange={(event) => setKeyword(event.target.value)}
      />
      <p>미리보기: {keyword || '입력 전'}</p>
      <button type="button" onClick={() => setKeyword('')}>
        지우기
      </button>
    </section>
  );
}

타이핑하면 onChange가 현재 문자열을 읽고 setKeyword가 상태를 바꾼다. 다시 렌더링된 입력창은 새 keyword를 받는다. ‘지우기’도 같은 상태를 빈 문자열로 바꾸므로 입력창과 미리보기가 함께 비워진다. 여기서 type="button"은 나중에 이 요소를 폼 안으로 옮겨도 지우기 버튼이 폼을 제출하지 않도록 역할을 명시한 것이다.

value만 넣거나 업데이트를 늦추면 무엇이 달라질까?

onChange를 빼고 value={keyword}만 두면 사용자가 입력한 글자가 상태에 기록되지 않는다. 핸들러는 있지만 상태 갱신을 다른 조건 뒤로 미루거나 이전 값으로 되돌려도 비슷한 증상이 난다. 우선 입력값과 상태값을 같은 시점에 확인하고, 이벤트에서 읽은 event.target.value가 실제로 setKeyword에 전달되는지 살펴본다.

초기값만 보여 주고 이후에는 브라우저가 입력값을 관리하게 하려는 경우에는 value 대신 defaultValue가 의도에 맞을 수 있다. 하지만 그 방식에서 React 상태만 바꾼다고 화면 입력값이 항상 바뀌지는 않는다. 입력·검증·초기화가 모두 같은 상태를 기준으로 동작해야 하는지가 선택 기준이다. 제어·비제어를 한 입력창에서 중간에 오가게 만들지 말고 처음부터 역할을 정한다.

이 동작의 정확한 경계는 React의 input 설명에서도 확인할 수 있다.

테스트와 성능 판단은 어떻게 할까?

먼저 한 글자씩 입력하며 값이 유지되는지 확인한다. 그다음 붙여넣기, 전체 삭제, ‘지우기’ 클릭 뒤 입력창과 미리보기의 값이 함께 바뀌는지 본다. 처음에는 빈 문자열이었다가 서버 응답 뒤 undefined가 들어가는 상태라면 제어 여부가 달라질 수 있으므로 초기값과 응답 변환도 점검한다.

제어 입력은 매 입력마다 상태를 갱신한다. 입력창 하나 때문에 무거운 화면 전체가 매번 다시 계산된다면, 입력 상태를 작은 컴포넌트로 옮기거나 비용이 큰 계산을 분리하는 편이 낫다. 성능 문제를 해결하려고 상태 갱신 자체를 빠뜨리면 입력이 되돌아가는 문제가 다시 생긴다. 서버로 보낼 검색어나 개인정보는 입력 상태에 있다는 이유만으로 안전하게 검증된 값이 아니므로, 제출 시에도 유효성·권한을 별도로 확인해야 한다.

핵심 요약: value와 onChange는 한 쌍이다

value로 입력값을 제어한다면 onChange에서 사용자의 새 값을 즉시 상태에 반영한다. 초기값만 필요하면 defaultValue가 맞는지 검토한다. 글자가 바로 사라질 때는 입력창 속성보다 상태가 언제 무엇으로 바뀌는지부터 확인하자.