React 입력칸에 글자가 안 써질 때, value와 onChange부터 분리하세요

AI가 만든 React 폼에서 입력칸은 보이는데 글자가 안 써질 때가 있습니다. 버튼이나 스타일을 다시 만들기 전에 먼저 볼 곳은 value와 onChange입니다. React에서 입력칸에 value를 넣고도 바뀐 값을 state에 돌려주는 onChange가 없으면, 그 입력칸은 사용자가 고칠 수 없는 값처럼 동작할 수 있습니다.

React의 <input> 문서는 value를 준 폼 필드에 onChange가 없으면 읽기 전용 필드로 렌더링된다고 설명합니다. 따라서 이 문제의 첫 답은 단순합니다. 수정 가능한 입력칸이면 value와 onChange를 한 쌍으로 둡니다. 처음 보일 값만 필요하면 defaultValue를 쓰고, 정말 표시 전용이면 readOnly를 명시합니다.

Tap to zoom

콘솔 경고가 value without onChange라면 입력칸의 역할부터 정합니다

브라우저 콘솔에 value와 onChange가 함께 언급되면 코드를 크게 뜯기 전에 입력칸의 역할을 셋 중 하나로 나눕니다.

초보자가 자주 하는 실수는 서버에서 받은 값이나 예시 문구를 그대로 value에 넣는 것입니다.

// 글자가 안 써지는 예
export default function ProfileForm() {
  return <input value="홍길동" />;
}

이 코드는 화면에 "홍길동"을 보여주지만, 사용자가 입력한 글자를 반영할 상태가 없습니다. 수정 가능한 입력칸으로 만들려면 state를 두고 onChange에서 다음 값을 넣어야 합니다.

import { useState } from "react";

export default function ProfileForm() {
  const [name, setName] = useState("홍길동");

  return (
    <input
      value={name}
      onChange={(event) => setName(event.target.value)}
    />
  );
}

이때 핵심은 event.target.value가 다시 name으로 들어간다는 점입니다. MDN의 input event 문서는 사용자의 입력으로 값이 바뀔 때 input 이벤트가 발생한다고 설명합니다. React에서는 그 변화를 onChange로 받아 state에 저장한다고 이해하면 됩니다.

기본값만 필요하면 defaultValue로 잠금을 풀 수 있습니다

모든 입력칸을 controlled input으로 만들 필요는 없습니다. AI가 예시 문구를 넣어 둔 단순 폼이라면 value 대신 defaultValue가 더 맞을 수 있습니다.

export default function SearchBox() {
  return <input defaultValue="React 입력 오류" />;
}

이 코드는 처음 화면에 기본 문구를 보여주지만, 이후 사용자가 타이핑한 값은 브라우저 입력칸 안에서 바뀔 수 있습니다. MDN의 HTMLInputElement.value 문서는 value가 입력 요소의 현재 값을 나타낸다고 설명합니다. React state가 그 값을 계속 관리해야 하는 화면인지, 아니면 브라우저 입력값으로 충분한 화면인지가 선택 기준입니다.

비슷한 입력 문제를 계속 만나고 있다면 React select가 안 바뀔 때 value부터 보는 순서와 React 체크박스가 안 눌릴 때 checked부터 고치는 순서를 같이 보면 같은 패턴을 빨리 잡을 수 있습니다.

Tap to zoom

onChange를 붙였는데도 안 되면 state가 같은 길로 돌아오는지 봅니다

onChange가 있어도 입력이 안 되는 경우가 있습니다. 대개 value가 읽는 state와 onChange가 바꾸는 state가 서로 다르거나, setState가 이전 값을 다시 넣고 있을 때입니다.

// 고쳐야 할 예
const [name, setName] = useState("");
const [draft, setDraft] = useState("");

return (
  <input
    value={name}
    onChange={(event) => setDraft(event.target.value)}
  />
);

이 코드는 입력할 때 draft만 바뀌고, 화면의 value는 여전히 name을 봅니다. 입력칸은 계속 빈 값으로 되돌아갑니다. 고칠 때는 읽는 값과 쓰는 값을 맞춥니다.

return (
  <input
    value={draft}
    onChange={(event) => setDraft(event.target.value)}
  />
);

확인은 세 단계면 충분합니다. 첫째, 글자를 입력했을 때 화면에 남는지 봅니다. 둘째, console.log(event.target.value)로 새 값이 찍히는지 봅니다. 셋째, value가 읽는 state와 setState가 바꾸는 state 이름이 같은지 봅니다. AI에게 다시 맡길 때도 이 세 가지를 붙이면 수정 범위가 작아집니다.

React input에 글자가 안 써집니다.

현재 증상:
- 콘솔 경고:
- input 코드:
- value가 읽는 state:
- onChange가 호출하는 setState:

요청:
- controlled input으로 고쳐주세요.
- value가 읽는 state와 onChange가 바꾸는 state를 같게 맞춰주세요.
- 다른 폼 구조는 바꾸지 말고 수정한 줄만 설명해주세요.

오늘 기억할 기준은 하나입니다. React 입력칸이 잠기면 value를 지우기 전에 입력칸의 역할을 먼저 정합니다. 수정할 값이면 value와 onChange를 한 쌍으로 맞추고, 기본값이면 defaultValue, 표시 전용이면 readOnly를 선택합니다. 이 글은 AI 코딩과 개발 학습의 일반 정보 제공 목적입니다. 도구, 모델, 커리큘럼, 요금은 버전과 시점에 따라 달라질 수 있으므로 실습이나 도입 전 공식 문서와 최신 릴리스 노트를 확인하세요.