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

 

 

제어 컴포넌트(Controlled Components)와 비제어 컴포넌트(Uncontrolled Components)는 주로 React에서 폼(form) 요소를 다룰 때 사용되는 두 가지 방식이다

이 두 개념은 폼 데이터를 어떻게 관리하고 상호작용할 것인가에 대한 접근 방식의 차이를 나타낸다

 

제어 컴포넌트 (함수형 컴포넌트 기준)

함수형 컴포넌트에서 제어 컴포넌트를 사용할 때,

폼 입력(input, textarea, select 등)의 상태는 React의 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();
    console.log('Submitted name:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

 

비제어 컴포넌트 (함수형 컴포넌트 기준)

함수형 컴포넌트에서 비제어 컴포넌트를 사용할 때,

useRef 훅을 사용하여 폼 요소에 대한 참조를 생성하고 관리한다

이 방식에서 폼 데이터는 DOM 자체에 의해 관리되며,

React 컴포넌트는 useRef를 통해 생성된 참조를 사용하여 필요할 때 폼 데이터를 직접 조회한다

이는 전통적인 HTML 폼 입력 방식에 더 가깝다

예시:

import React, { useRef } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted name:', nameInputRef.current.value);
  };

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

 

제어 컴포넌트와 비제어 컴포넌트 모두 함수형 컴포넌트에서 유용하게 사용될 수 있으며,

각각의 방식은 폼 데이터를 다루는 방법과 개발자의 선호에 따라 선택될 수 있습니다

 

제어 컴포넌트는 React 상태를 통한 폼 데이터의 관리와 동기화에 적합하고,

비제어 컴포넌트는 DOM 자체의 폼 데이터 관리와 전통적인 HTML 폼 처리 방식에 가깝습니다.

 

비교 및 선택 기준

• 제어 컴포넌트
  • 폼 데이터의 상태를 React 컴포넌트 내에서 완전히 제어할 수 있다
  • 데이터의 유효성 검사, 입력 데이터의 변형, 조건부 렌더링 등을 쉽게 구현할 수 있다
• 비제어 컴포넌트
  • 폼 데이터를 처리할 때 보다 선언적이지 않지만, 때로는 더 간단하고, 더 빠르며, 기존의 HTML 폼 작업 방식과 더 유사하다

 

어떤 방식을 사용할지는 개발자의 선호도, 애플리케이션의 복잡성, 그리고 특정 상황의 요구 사항에 따라 달라질 수 있다

 

일반적으로 폼 데이터를 React의 상태로 관리할 필요가 있을 때는 제어 컴포넌트를 사용하는 것이 좋다

이는 폼 데이터에 대한 더 나은 제어와 함께, 데이터의 유효성 검사 및 처리, 사용자 입력에 따른 동적인 반응 등을 쉽게 구현할 수 있게 해준다

 

반면,

폼 데이터를 직접적으로 다룰 필요가 없거나 React 외부 라이브러리와 함께 사용해야 하는 경우,

비제어 컴포넌트를 사용하는 것이 더 편리할 수 있다

 

비제어 컴포넌트는 특히 폼 데이터를 직접 다루는 대신, 폼 제출 시점에만 데이터를 처리하려는 경우에 유용하다

비제어 컴포넌트는 DOM 자체에 폼 데이터를 저장하므로, React에서 폼 상태를 직접 관리할 필요가 없을 때 간단하고 효율적인 해결책을 제공한다

또한, 기존의 HTML 폼 동작과 더 일치하므로, 전통적인 HTML 폼을 사용하는 데 익숙한 개발자들에게 친숙할 수 있다

 

결론적으로,

제어 컴포넌트와 비제어 컴포넌트 각각은 사용 사례와 개발자의 필요에 따라 장단점이 있다

따라서, 애플리케이션의 특정 요구 사항과 개발 환경을 고려하여 가장 적합한 접근 방식을 선택하는 것이 중요하다

React는 이 두 가지 접근 방식을 모두 지원하므로, 프로젝트의 목표와 개발자의 선호에 따라 유연하게 선택할 수 있다