[React] 6일차: 입력 폼 처리와 useRef – 사용자와 상호작용하기

리액트 공부 6일차입니다! 오늘은 사용자가 입력하는 데이터를 어떻게 관리하고, 리액트 방식이 아닌 실제 DOM 요소에 직접 접근해야 할 때는 어떻게 하는지 핵심을 정리해 보았습니다.

1. 제어 컴포넌트 (Controlled Components)

리액트에서는 <input>, <textarea> 같은 폼 요소의 값을 리액트의 State와 결합하여 관리합니다. 이를 '제어 컴포넌트'라고 부릅니다.

• 동작 방식: 입력창의 value를 State에 연결하고, onChange 이벤트를 통해 사용자가 입력할 때마다 State를 업데이트합니다.
• 장점: 입력값에 대한 실시간 유효성 검사나 데이터 가공이 매우 쉽습니다.

JavaScript

 

const [name, setName] = useState("");

const handleChange = (e) => {
  setName(e.target.value);
};

return <input type="text" value={name} onChange={handleChange} />;

2. 여러 개의 입력 항목 관리하기

입력 항목이 많아질 때 각각 useState를 만들면 코드가 복잡해집니다. 이럴 때는 객체 형태의 State를 사용하면 효율적입니다.

• name 속성을 활용해 어떤 입력창에서 이벤트가 발생했는지 파악합니다.
• **스프레드 연산자(...)**를 사용하여 기존 값을 유지하며 특정 값만 변경하는 것이 포인트입니다!

JavaScript

 

const [form, setForm] = useState({ title: "", content: "" });

const onChange = (e) => {
  const { name, value } = e.target;
  setForm({
    ...form,
    [name]: value // 계산된 속성 이름 문법 사용
  });
};

3. useRef – DOM에 직접 접근하기

리액트에서는 대개 State를 통해 화면을 제어하지만, 가끔은 실제 HTML 요소(DOM)를 직접 건드려야 할 때가 있습니다. (예: 특정 입력창에 강제로 포커스 주기, 스크롤 위치 조작 등)

• 특징: useRef로 만든 변수는 값이 변해도 컴포넌트가 다시 렌더링되지 않습니다.
• 포커스를 주고 싶을 때 inputRef.current.focus()와 같이 사용합니다.

Copyright 2026. [Ryon] all rights reserved.