10 React에서 폼(Form) 다루기: 입력 요소의 상태 관리 및 useRef 활용

 

1. React에서 폼(Form)의 중요성

웹 애플리케이션에서 폼(Form)은 사용자 입력을 받아 처리하는 중요한 요소입니다. React에서는 폼을 다룰 때 제어 컴포넌트(Control Component)와 비제어 컴포넌트(Uncontrolled Component)라는 두 가지 방식이 있습니다. 이번 글에서는 입력 요소의 상태 관리와 useRef를 활용한 비제어 컴포넌트를 살펴보겠습니다.

2. 입력 요소의 상태 관리

입력 요소의 상태를 관리하는 가장 일반적인 방법은 useState를 사용하는 것입니다. useState를 활용하면 입력 값이 변경될 때마다 상태를 업데이트할 수 있습니다.

가. useState를 활용한 입력 요소 관리

import React, { useState } from "react";

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`입력된 이름: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={handleChange} />
      <button type="submit">제출</button>
    </form>
  );
}

export default ControlledForm;

위 코드에서 useState를 활용하여 name 상태를 관리하고 있으며, 입력 값이 변경될 때마다 onChange 이벤트를 통해 상태를 업데이트합니다.

3. useRef를 활용한 비제어 컴포넌트

비제어 컴포넌트는 useRef를 활용하여 직접 DOM 요소에 접근하여 값을 가져오는 방식입니다. 상태 관리를 하지 않기 때문에 불필요한 렌더링을 줄일 수 있습니다.

나. useRef를 활용한 비제어 컴포넌트 예제

import React, { useRef } from "react";

function UncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`입력된 값: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">제출</button>
    </form>
  );
}

export default UncontrolledForm;

위 코드에서 useRef를 활용하여 입력 요소에 직접 접근하고 있으며, onChange 이벤트 없이도 값을 가져올 수 있습니다.

4. 제어 컴포넌트 vs 비제어 컴포넌트

비교 항목제어 컴포넌트 (Controlled)비제어 컴포넌트 (Uncontrolled)

상태 관리	useState 활용	useRef 활용
렌더링 발생	값 변경 시마다 리렌더링	값 변경 시 리렌더링 없음
활용 예	동적 검증, 실시간 입력 값 처리	빠른 폼 제출, 초기값 유지

제어 컴포넌트는 입력 값이 상태에 저장되므로 입력 값 검증이나 조건부 로직 적용에 유용합니다. 반면, 비제어 컴포넌트는 입력 값을 한 번에 가져와야 할 때 유용하며, 불필요한 리렌더링을 방지할 수 있습니다.

5. 정리

React에서 폼을 다루는 방식에는 제어 컴포넌트와 비제어 컴포넌트가 있으며, 각각의 장점과 단점이 존재합니다. useState를 사용하면 입력 값을 쉽게 관리할 수 있지만, 렌더링 비용이 증가할 수 있습니다. 반면, useRef를 활용한 비제어 컴포넌트는 렌더링을 최소화할 수 있지만 값 변경을 실시간으로 반영하기 어렵습니다.

React에서 폼을 다룰 때 프로젝트의 요구 사항에 맞게 적절한 방법을 선택하는 것이 중요합니다. 앞으로의 개발에서 이 두 가지 방식을 적절히 활용하여 효율적인 폼 관리를 해보시길 바랍니다!