폼 입력

value와 onChange는 항상 함께

핵심 포인트

입력란의 값은 state에 보관합니다. value={name}으로 표시하고 onChange로 업데이트합니다(제어 컴포넌트)
value와 onChange는 한 쌍입니다. onChange가 없으면 글자를 입력할 수 없습니다
체크박스는 value 대신 checked, e.target.value 대신 e.target.checked를 사용합니다

직접 해 보기

import { useState } from "react"

export default function App() {
  const [name, setName] = useState("")
  const [agreed, setAgreed] = useState(false)

  return (
    <div style={{ padding: 16, display: "grid", gap: 12 }}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="이름"
      />
      <label>
        <input
          type="checkbox"
          checked={agreed}
          onChange={(e) => setAgreed(e.target.checked)}
        />
        이용약관에 동의합니다
      </label>
      <button disabled={!name || !agreed}>보내기</button>
      <p>입력 중: {name}</p>
    </div>
  )
}

Open Sandbox

onChange 줄을 지우고 더 이상 입력할 수 없는지 확인해 보세요
이메일 입력란을 추가해 보세요 (state를 하나 더 만듭니다)
이름이 비어 있을 때 "이름을 입력해 주세요"를 빨간 글씨로 표시해 보세요 (힌트: &&)

자주 하는 실수

value만 쓰고 onChange를 잊음

value={name}은 "state의 값을 표시한다"는 뜻이므로, onChange로 state를 업데이트하지 않으면 무엇을 입력해도 원래대로 돌아갑니다.

disabled={!agreed}는 "동의하지 않으면 누를 수 없음"

!는 반대라는 뜻입니다. 말로 소리 내어 읽어 보면 쉽게 이해할 수 있습니다. 조건이 여러 개면 ||로 잇습니다(하나라도 맞지 않으면 누를 수 없음).