<input>

• 참조
• <input>

• 사용법
• 다양한 유형의 input 표시하기
• input에 대한 label 제공하기
• input에 대한 초기값 제공하기
• form 제출 시 input 값 읽기
• state 변수로 input 제어하기
• 모든 키 입력 리렌더링 최적화하기

• 문제 해결
• 텍스트 input에 타이핑해도 업데이트되지 않습니다
• 체크박스를 클릭해도 업데이트되지 않습니다
• 키를 누를 때마다 커서가 처음으로 이동합니다
• “컴포넌트가 비제어 입력을 제어하도록 변경하고 있습니다.” 라는 오류가 발생합니다

참조

<input>

Props

• checked: 불리언. 체크박스 input 또는 라디오 버튼의 선택 여부를 제어합니다.

• value: 문자열. 텍스트 input의 텍스트를 제어합니다. (라디오 버튼의 경우 해당 form data를 지정합니다).

• defaultChecked: 불리언. type="checkbox" 및 type="radio"의 기본값을 특정합니다.

• defaultValue: 문자열. 텍스트 input의 기본값을 특정합니다.

• accept: 문자열. type="file" input에 허용되는 파일 형식을 지정합니다.

• alt: 문자열. type="image" input의 대체 이미지 텍스트를 지정합니다.

• capture: 문자열. type="file" input으로 캡쳐할 미디어(마이크, 비디오, 카메라)를 지정합니다.

• autoComplete: 문자열. 가능한 자동완성 동작을 지정합니다.

• autoFocus: 불리언. true이면 엘리먼트가 마운트될 때 초점을 맞춥니다.

• dirname: 문자열. 엘리먼트의 방향성에 대한 폼 필드 이름을 지정합니다.

• disabled: 불리언. true이면 해당 input은 상호작용할 수 없으며 흐릿하게 보여집니다.

• children: <input>은 자식을 받지 않습니다.

• form: 문자열. 이 input이 속한 <form>의 id를 지정합니다. 이 prop이 없으면 상위의 가장 가까운 form이 됩니다.

• formAction: 문자열. type="submit" 및 type="image"에 대해 상위 <form action>을 덮습니다.

• formEnctype: 문자열. type="submit" 및 type="image"에 대해 상위 <form enctype>을 덮습니다.

• formMethod: 문자열. type="submit" 및 type="image"에 대해 상위 <form method>을 덮습니다.

• formNoValidate: 문자열. type="submit" 및 type="image"에 대해 상위 <form noValidate>을 덮습니다.

• formTarget: 문자열. type="submit" 및 type="image"에 대해 상위 <form target>을 덮습니다.

• height: 문자열. type="image"의 이미지 높이를 지정합니다.

• list: 문자열. autocomplete 옵션들과 함께 <datalist>의 id를 지정합니다.

• max: 숫자. 숫자타입 및 날짜시간 input의 최대값을 지정합니다.

• maxLength: 숫자. 텍스트 및 기타 input의 최대 길이를 지정합니다.

• min: 숫자. 숫자타입 및 날짜시간 input의 최솟값을 지정합니다.

• minLength: 숫자. 텍스트 및 기타 input의 최소 길이를 지정합니다.

• multiple: 불리언. type="file" 및 type="email"에 대해 여러 값을 허용할지 여부를 지정합니다.

• name: 문자열. 폼에 제출되는 input의 이름을 지정합니다.

• onChange: Event 핸들러 함수. 제어 input에서 필수입니다. 사용자가 input의 값을 변경하면 즉시 호출됩니다(예: 키 입력시마다 발생). 브라우저 input 이벤트처럼 동작합니다.

• onChangeCapture: 캡쳐 단계에서 실행되는 버전의 onChange 입니다.

• onInput: Event 핸들러 함수. 사용자가 값을 변경하면 즉시 호출됩니다. 역사적인 이유로 React에서는 비슷한 방식으로 작동하는 onChange를 대신 사용하는 것이 일반적입니다.

• onInputCapture: 캡쳐 단계에서 실행되는 버전의 onInput 입니다.

• onInvalid: Event 핸들러 함수. 폼 제출시 input이 유효성 검사에 실패하면 호출됩니다. 빌트인 invalid 이벤트와 달리, React의 onInvalid 이벤트는 버블을 발생시킵니다.

• onInvalidCapture: 캡쳐 단계에서 실행되는 버전의 onInvalid 입니다.

• onSelect: Event 핸들러 함수. <input> 내부의 선택이 변경되면 호출됩니다. React는 선택이 빈 경우와 (선택에 영향을 미칠 수 있는) 편집에 대해서도 onSelect 이벤트가 호출되도록 확장합니다.

• onSelectCapture:캡쳐 단계에서 실행되는 버전의 onSelect 입니다.

• pattern: 문자열. value가 일치해야 하는 패턴을 지정합니다.

• placeholder: 문자열. input 값이 비어있을 때 희미한 색상으로 표시되는 텍스트입니다.

• readOnly: 불리언. true이면 이 input은 사용자가 편집할 수 없습니다.

• required: 불리언. true이면 값을 입력해야만 폼을 제출할 수 있습니다.

• size: 숫자. 너비 설정과 유사하지만, 단위는 컨트롤에 따라 다릅니다.

• src: 문자열. type="image" input의 이미지 소스를 지정합니다.

• step: 양수 또는 문자열 'any'. 유효한 값 사이의 거리를 지정합니다.

• type: 문자열. input type 중 하나.

• width: 문자열. type="image" input의 이미지 너비를 지정합니다.

주의사항

• 체크박스는 value(또는 defaultValue)가 아닌 checked(또는 defaultChecked)가 필요합니다.

• 텍스트 input이 문자열 value prop을 받으면 제어된 것으로 처리됩니다.

• 체크박스나 라디오 버튼이 불리언 checked prop을 받으면 제어된 것으로 처리됩니다.

• input은 동시에 제어되거나 제어되지 않을 수 없습니다.

• input은 수명 동안 제어되거나 제어되지 않는 상태로 전환될 수 없습니다.

• 제어되는 모든 입력에는 onChange 이벤트 핸들러가 필요하며, 이 핸들러는 지원 값을 동기적으로 업데이트합니다.

사용법

다양한 유형의 input 표시하기

input에 대한 label 제공하기

input에 대한 초기값 제공하기

form 제출 시 input 값 읽기

Note

Pitfall | 함정

state 변수로 input 제어하기

function Form() {
  const [firstName, setFirstName] = useState(''); // Declare a state variable...
                                                  // state 변수 정의...
  // ...
  return (
    <input
      value={firstName} // ...force the input's value to match the state variable...
                        // ...input값이 state 변수와 일치하도록 강제...
      onChange={e => setFirstName(e.target.value)} // ... and update the state variable on any edits!
                                                   // ... 그리고 수정할 때마다 state 변수를 업데이트하세요!
    />
  );
}

function Form() {
  const [firstName, setFirstName] = useState('');
  return (
    <>
      <label>
        First name:
        <input value={firstName} onChange={e => setFirstName(e.target.value)} />
      </label>
      {firstName !== '' && <p>Your name is {firstName}.</p>}
      ...

function Form() {
  // ...
  const [age, setAge] = useState('');
  const ageAsNumber = Number(age);
  return (
    <>
      <label>
        Age:
        <input
          value={age}
          onChange={e => setAge(e.target.value)}
          type="number"
        />
        <button onClick={() => setAge(ageAsNumber + 10)}>
          Add 10 years
        </button>

Pitfall | 함정

모든 키 입력 리렌더링 최적화하기

function App() {
  const [firstName, setFirstName] = useState('');
  return (
    <>
      <form>
        <input value={firstName} onChange={e => setFirstName(e.target.value)} />
      </form>
      <PageContent />
    </>
  );
}

function App() {
  return (
    <>
      <SignupForm />
      <PageContent />
    </>
  );
}

function SignupForm() {
  const [firstName, setFirstName] = useState('');
  return (
    <form>
      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
    </form>
  );
}

문제 해결

텍스트 input에 타이핑해도 업데이트되지 않습니다

// 🔴 Bug: controlled text input with no onChange handler
// 🔴 버그: 제어 텍스트 input에 onChange 핸들러가 없습니다
<input value={something} />

// ✅ Good: uncontrolled input with an initial value
// ✅ 좋음: 초기값을 제공한 비제어 input
<input defaultValue={something} />

// ✅ Good: controlled input with onChange
// ✅ 좋음: onChange가 있는 제어 input
<input value={something} onChange={e => setSomething(e.target.value)} />

// ✅ Good: readonly controlled input without onChange
// ✅ 좋음: onChange가 없는 읽기 전용 제어 input
<input value={something} readOnly={true} />

체크박스를 클릭해도 업데이트되지 않습니다

// 🔴 Bug: controlled checkbox with no onChange handler
// 🔴 버그: 제어 체크박스에 onChange 핸들러가 없습니다
<input type="checkbox" checked={something} />

// ✅ Good: uncontrolled checkbox with an initial value
// ✅ 좋음: 초기값을 제공한 비제어 체크박스
<input type="checkbox" defaultChecked={something} />

Pitfall | 함정

// ✅ Good: readonly controlled checkbox without on change
// ✅ 좋음: onChange가 없는 읽기 전용 제어 체크박스
<input type="checkbox" checked={something} readOnly={true} />

키를 누를 때마다 커서가 처음으로 이동합니다

function handleChange(e) {
  // 🔴 Bug: updating an input to something other than e.target.value
  // 🔴 버그: e.target.value가 아닌 다른 값으로 업데이트 시도
  setFirstName(e.target.value.toUpperCase());
}

function handleChange(e) {
  // 🔴 Bug: updating an input asynchronously
  // 🔴 버그: 비동기적으로 업데이트 시도
  setTimeout(() => {
    setFirstName(e.target.value);
  }, 100);
}

function handleChange(e) {
  // ✅ Updating a controlled input to e.target.value synchronously
  // ✅ 제어 input을 e.target.value로부터 동기적으로 업데이트
  setFirstName(e.target.value);
}

“컴포넌트가 비제어 입력을 제어하도록 변경하고 있습니다.” 라는 오류가 발생합니다