[React] 제어(Controlled) 컴포넌트와 비제어(Uncontrolled) 컴포넌트의 차이

React에서 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 데이터 흐름과 상태 관리 방식의 차이에 따라 구분됩니다.

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

   - 제어 컴포넌트는 React의 상태(state)를 사용하여 데이터를 관리합니다.

   - 컴포넌트의 상태(state)를 업데이트하고, 이를 컴포넌트의 속성(props)로 전달하여 UI를 제어합니다.

   - 사용자 입력에 대한 이벤트 핸들러를 통해 상태(state)를 업데이트하고, 업데이트된 상태를 UI에 반영합니다.

   - 예를 들어, `<input>` 요소의 값을 상태(state)로 관리하고, `onChange` 이벤트 핸들러를 통해 상태(state)를 업데이트하여 사용자 입력에 따라 UI가 동적으로 변화하는 것이 제어 컴포넌트의 특징입니다.

 

2. 비제어 컴포넌트(Uncontrolled Component)

   - 비제어 컴포넌트는 React의 상태(state)를 사용하지 않고, DOM을 직접 조작하여 데이터를 관리합니다.

   - 컴포넌트가 자체적으로 상태(state)를 가지지 않으며, 사용자 입력에 대한 DOM 이벤트를 직접 처리하여 데이터를 추출합니다.

   - 사용자 입력에 대한 DOM 이벤트 처리기를 통해 데이터를 추출하고, 필요에 따라 직접 상태(state)를 업데이트하거나 다른 방식으로 데이터를 처리합니다.

   - 예를 들어, `<input>` 요소의 값을 `ref`를 통해 직접 가져오거나, `onSubmit` 이벤트 핸들러를 통해 데이터를 처리하는 것이 비제어 컴포넌트의 특징입니다.

 

제어 컴포넌트는 React의 상태(state)를 사용하여 데이터 흐름을 관리하므로, 데이터의 흐름이 예측 가능하고 제어할 수 있습니다. 반면에 비제어 컴포넌트는 DOM을 직접 조작하여 데이터를 추출하므로, 데이터 흐름이 더욱 자유로워질 수 있지만 예측하기 어렵고 상태 관리가 어려울 수 있습니다.

 

제어 컴포넌트는 보다 정교한 상태 관리와 유효성 검사를 위해 사용되는 경우가 많고, 비제어 컴포넌트는 단순한 상황에서 더 간편하게 사용될 수 있습니다. 선택은 개발자의 요구사항과 상황에 따라 결정되어야 합니다.

 

3. React에서 제어 컴포넌트(Controlled Component)를 사용하는 방법

1. 상태(state) 설정

제어 컴포넌트를 사용하기 위해서는 컴포넌트의 상태(state)를 정의해야 합니다. 상태는 컴포넌트가 가지는 데이터를 나타내며, 사용자 입력에 따라 업데이트됩니다.

value 속성과 onChange 이벤트 핸들러: 제어 컴포넌트에서는 <input> 요소의 value 속성을 상태(state)로 설정하고, onChange 이벤트 핸들러를 통해 상태(state)를 업데이트합니다.

import React, { useState } from 'react';

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

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

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

 

2. value 속성

<input> 요소의 value 속성은 상태(state)를 바인딩하여 현재 입력 값을 나타냅니다.

onChange 이벤트 핸들러: <input> 요소의 onChange 이벤트 핸들러는 사용자의 입력에 따라 상태(state)를 업데이트합니다.

 

3. 상태(state) 업데이트 -> 아래 추가설명

onChange 이벤트 핸들러에서는 입력 값에 따라 상태(state)를 업데이트합니다. 이후, 상태(state)의 변화에 따라 UI가 업데이트됩니다.

 

위의 예시에서는 handleChange 함수가 onChange 이벤트 핸들러로 사용되었습니다. 이 함수는 입력 값에 따라 setValue 함수를 호출하여 상태(state)를 업데이트합니다.

제어 컴포넌트를 사용하면 React의 상태(state)를 통해 데이터 흐름을 제어할 수 있습니다. 이를 통해 입력 폼의 값이 예측 가능하고, 상태(state)를 통한 유효성 검사 등의 추가적인 로직을 구현할 수 있습니다.

 

4. 제어 컴포넌트에서 상태(State) 업데이트 하는 방법

1. 상태(state) 초기화

상태(state)를 초기값으로 설정합니다. 이는 useState 훅을 사용하여 상태(state)를 정의하고 초기값을 할당하는 것으로 이루어집니다.

//value는 상태(state)를 나타내는 변수이고, setValue는 해당 상태(state)를 업데이트하는 함수입니다.
//useState('')를 통해 초기값으로 빈 문자열을 할당

import React, { useState } from 'react';

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

  // ...
}

 

2. 이벤트 핸들러 구현

이벤트 핸들러를 구현하여 사용자의 입력에 따라 상태(state)를 업데이트합니다. 이벤트 핸들러는 보통 onChange, onClick, onSubmit 등과 같은 이벤트에 연결됩니다.

// handleChange 함수는 <input> 요소의 onChange 이벤트에 연결되어 사용자의 입력에 따라 상태(state)를 업데이트
// event.target.value는 입력 값에 해당하는 문자열

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

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

  // ...
}

 

3. 상태(state) 업데이트

이벤트 핸들러에서는 setValue 함수를 호출하여 상태(state)를 업데이트합니다. setValue 함수는 새로운 값을 인수로 받아 상태(state)를 업데이트합니다.

// <input> 요소의 value 속성을 상태(state)로 설정하고,
// onChange 이벤트에 handleChange 함수를 연결하여 상태(state)를 업데이트합니다.
// 이후, 상태(state)의 변화에 따라 UI가 업데이트

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

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

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

상태(state)를 업데이트하면 제어 컴포넌트에서 입력 값과 상태(state)가 동기화되어 예측 가능한 데이터 흐름을 구현할 수 있습니다.