React 폼 제어의 모든 것: 효과적인 Controlled 및 Uncontrolled 컴포넌트

React 폼 제어의 모든 것: 효과적인 Controlled 및 Uncontrolled 컴포넌트

React에서는 폼 요소를 제어하기 위해 Controlled와 Uncontrolled 두 가지 방식이 있습니다. 이 글에서는 이 두 가지 접근 방식의 차이점을 깊이 있게 탐구하고, 실용적인 상황에 어떻게 적용할 수 있는지 알아보겠습니다.

Controlled 컴포넌트란 무엇인가요?

Controlled 컴포넌트는 React 상태(state)에 의해 그 값이 제어되는 입력 요소입니다. 즉, 입력 값이 컴포넌트의 state에 저장되고, 모든 값은 state를 통해 관리되기 때문에 예측 가능한 상태 관리를 제공합니다.

• 컴포넌트의 상태가 변경되면 입력 값도 변화합니다.
• React의 공식 문서에서는 기본적으로 Controlled 방식의 사용을 권장합니다.

import React, { useState } from 'react';

function ControlledComponent() {
  const [inputValue, setInputValue] = useState('');

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

  return (
    <input type="text" value={inputValue} onChange={handleChange} />
  );
}

위 코드에서 inputValue는 useState를 통해 관리됩니다. 사용자가 입력창에 값을 입력할 때마다 handleChange 함수가 호출되어 상태와 UI가 동기화됩니다.

Uncontrolled 컴포넌트 이해하기

Uncontrolled 컴포넌트는 React 상태 대신 DOM 자체에서 폼 데이터를 관리합니다. 초기 상태나 외부 조작이 필요하지 않을 경우 Uncontrolled 방식이 더 간단할 수 있습니다.

• 상태 관리가 필요 없는 경우에 유용합니다.
• Ref를 통해 DOM 요소에 직접 접근합니다.

import React, { useRef } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(inputRef.current.value);
  };

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

위 사례에서는 useRef를 사용하여 DOM 노드에 직접 접근하며, 폼 제출 시 입력 값을 콘솔에 출력합니다.

textarea, checkbox, select의 제어

폼 요소는 input뿐만 아니라 textarea, checkbox, select 등 다양한 요소를 포함합니다. 이 요소들을 Controlled 방식으로 활용하는 것도 중요합니다.

Textarea 제어하기

<textarea value={textareaValue} onChange={handleTextareaChange} />

Textarea는 value 속성과 onChange 핸들러를 통해 상태 관리를 하게 됩니다.

Checkbox 제어하기

Checkbox는 checked 속성을 사용하여 상태를 제어합니다.

<input type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />

Select 제어하기

Select 요소는 value 속성으로 선택된 옵션을 관리합니다.

<select value={selectedValue} onChange={handleSelectChange}>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

결론

React에서 폼 데이터를 관리하는 방법은 Controlled와 Uncontrolled라는 두 가지가 있습니다. 여러분의 프로젝트 상황에 맞춰 어떤 방식이 적합한지 선택할 수 있습니다. 실험을 통해 어떤 방식이 더 유리한지 확인해보는 것도 좋은 접근입니다. 여러분은 어떤 방식을 선호하나요?