21. 폼 처리와 데이터 통신 - 1

제어 컴포넌트와 비제어 컴포넌트 소개

React에서는 사용자 입력을 처리하는 두 가지 주요한 컴포넌트 패턴인 제어 컴포넌트(Controlled Components)와 비제어 컴포넌트(Uncontrolled Components)가 있습니다. 각각의 특징과 사용법을 알아보겠습니다.

제어 컴포넌트(Controlled Components)

제어 컴포넌트는 React에서 가장 일반적으로 사용되는 패턴 중 하나입니다. 이 패턴에서는 입력 폼 요소의 상태를 React 컴포넌트의 state에 저장하고, 이 state를 업데이트하여 폼 요소의 값을 제어합니다.

import React, { useState } from 'react';

const ControlledComponent = () => {
  const [value, setValue] = useState('');

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

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

export default ControlledComponent;

 

위 코드에서는 useState 훅을 사용하여 value 상태를 관리하고 있습니다. handleChange 함수를 사용하여 입력 값이 변경될 때마다 상태를 업데이트합니다. 이를 통해 사용자 입력을 제어하고, React의 단일 소스 오브 진실(Single Source of Truth) 원칙을 따릅니다.

비제어 컴포넌트(Uncontrolled Components)

비제어 컴포넌트는 React의 상태(state)를 사용하여 입력 값을 제어하는 대신, DOM 요소의 ref를 사용하여 직접 DOM에 접근하여 값을 가져오거나 설정합니다.

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert(`Input value: ${inputRef.current.value}`);
  };

  return (
    <div>
      <input type="text" ref={inputRef} placeholder="Enter text..." />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
};

export default UncontrolledComponent;

 

위 코드에서는 useRef 훅을 사용하여 input 요소의 ref를 생성하고, 이를 이용하여 DOM에 직접 접근합니다. 버튼을 클릭할 때 inputRef.current.value를 사용하여 입력된 값을 가져와서 사용할 수 있습니다.

정리

제어 컴포넌트와 비제어 컴포넌트는 React에서 사용자 입력을 다루는 두 가지 주요한 패턴입니다. 제어 컴포넌트는 React의 state를 사용하여 입력 값을 제어하고, 비제어 컴포넌트는 DOM 요소의 ref를 사용하여 직접 DOM에 접근하여 값을 가져오거나 설정합니다. 각각의 패턴은 특정 상황에 유용하며, 개발자는 상황에 맞게 선택하여 사용할 수 있습니다.