6단계: 폼 다루기

6-1. Controlled vs Uncontrolled 컴포넌트

Controlled Component

입력값을 state로 관리하며, 상태 변경에 따라 입력값이 바뀝니다.

const [value, setValue] = useState("");
<input value={value} onChange={(e) => setValue(e.target.value)} />

Uncontrolled Component

DOM을 직접 참조(ref)하여 값을 제어합니다.

const inputRef = useRef();
<input ref={inputRef} />

6-2. 텍스트 입력 처리

React에서는 입력 필드를 state에 바인딩하여 값 변경을 추적합니다.

function TextInput() {
  const [text, setText] = useState("");
  return <input value={text} onChange={(e) => setText(e.target.value)} />;
}

6-3. 체크박스와 라디오 버튼 처리

체크박스는 checked 상태를, 라디오는 value를 기반으로 제어합니다.

<input type="checkbox" checked={isChecked} onChange={(e) => setChecked(e.target.checked)} />
<input type="radio" value="A" checked={selected === "A"} onChange={(e) => setSelected(e.target.value)} />

6-4. 셀렉트 박스 다루기

<select value={option} onChange={(e) => setOption(e.target.value)}>
  <option value="one">One</option>
  <option value="two">Two</option>
</select>

6-5. 폼 제출 처리

폼은 onSubmit 이벤트를 통해 상태를 처리하며, 기본 동작 방지가 필요합니다.

<form onSubmit={(e) => {
  e.preventDefault();
  console.log("제출됨");
}}>
  <input value={name} onChange={(e) => setName(e.target.value)} />
</form>

6-6. 유효성 검사 기본 구현

입력값이 조건을 만족하는지 직접 체크하거나, 라이브러리로 구현할 수 있습니다.

if (email.length === 0) {
  setError("이메일은 필수입니다.");
}

6-7. 라이브러리 사용 예 (react-hook-form)

const { register, handleSubmit } = useForm();
<form onSubmit={handleSubmit(onValid)}>
  <input {...register("username", { required: true })} />
</form>

요약

Controlled 방식이 리액트에서 기본 폼 처리 방식
다양한 입력 요소는 state로 관리되며 onChange 이벤트로 값을 추적
기본 제출은 preventDefault로 막아야 함
유효성 검사는 직접 구현하거나 react-hook-form 같은 라이브러리 활용 가능

심화학습

Q1. Controlled 컴포넌트의 장점은 무엇인가요?
A1. 상태에 따라 입력값을 완전히 제어할 수 있어, 유효성 검사나 조건부 렌더링 등과 연동이 쉽습니다.

Q2. Uncontrolled 컴포넌트를 언제 사용하는 것이 좋을까요?
A2. 빠르게 값을 읽기만 할 경우나 성능 최적화가 필요한 대규모 폼에서는 ref를 통해 직접 접근하는 방식이 더 효율적일 수 있습니다.

Q3. 폼 유효성 검사를 수동으로 구현할 때 자주 발생하는 실수는?
A3. 조건문 누락, 즉시 오류 제거 미처리, blur 시점 검사 누락 등으로 인해 UX가 떨어질 수 있습니다.