[React] 5일차: 리액트로 사용자 입력(Input) 처리하기 (제어 컴포넌트)

리액트에서 사용자가 입력하는 값(Input, Textarea 등)을 어떻게 관리할까요?

HTML에서는 브라우저가 입력값을 들고 있지만, 리액트에서는 "모든 데이터는 리액트의 상태(State)가 관리한다"는 원칙을 따릅니다. 이를 제어 컴포넌트라고 합니다.

1. 제어 컴포넌트(Controlled Component)란?

입력창에 타이핑을 할 때마다 리액트의 state를 업데이트하고, 그 state를 다시 입력창의 value로 보여주는 방식입니다. 즉, 데이터의 신뢰 가능한 단일 출처(Single Source of Truth)를 리액트 상태로 두는 것입니다.

2. 단일 입력창 관리하기

가장 기본적인 방식은 onChange 이벤트와 useState를 조합하는 것입니다.

JavaScript

 

import { useState } from 'react';

function SimpleInput() {
  const [text, setText] = useState("");

  const handleChange = (e) => {
    setText(e.target.value); // 입력된 값을 state에 반영
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>실시간 입력 내용: {text}</p>
    </div>
  );
}

3. 여러 개의 입력창 관리하기 (객체 활용)

입력창이 이름, 이메일, 비밀번호 등 여러 개일 때 useState를 여러 번 쓰는 것은 비효율적입니다. 이때는 객체 상태와 name 속성을 활용합니다.

• 핵심: 2일차에 배웠던 스프레드 연산자(...)를 사용하여 기존 값을 복사하고 변경된 부분만 덮어씁니다.

JavaScript

 

const [form, setForm] = useState({
  username: "",
  email: ""
});

const { username, email } = form; // 구조 분해 할당

const onChange = (e) => {
  const { name, value } = e.target; // e.target에서 name과 value 추출
  setForm({
    ...form,       // 기존 객체 복사 (불변성 유지)
    [name]: value  // 해당 name 키를 가진 값을 value로 업데이트
  });
};

4. 폼 제출 처리 (onSubmit)

버튼을 눌러 데이터를 서버로 보낼 때는 form 태그의 onSubmit 이벤트를 사용합니다. 이때 브라우저가 페이지를 새로고침하는 기본 동작을 막아주는 e.preventDefault()가 필수입니다.

JavaScript

 

const handleSubmit = (e) => {
  e.preventDefault(); // 새로고침 방지
  console.log("제출 데이터:", form);
};

Copyright 2026. [Ryon] all rights reserved.