[React] 제어 컴포넌트와 비제어 컴포넌트

제어 컴포넌트 (Controlled Components)

제어 컴포넌트는 React의 상태(state)에 의해 관리되는 컴포넌트로 입력 값이나 UI 상태를 React 컴포넌트의 state에 저장해두고 해당 상태를 바탕으로 UI를 갱신한다.

예를 들어 <input> 필드의 값이 변경되면 해당 변경을 state로 관리하고 이 state를 통해 값이 제어된다.

특징

• 단일 데이터 소스: 입력 필드의 값이 컴포넌트의 state에서 관리되므로 입력 필드와 상태 값이 항상 일치하게 된다.
• 변경 감지 및 처리: 값이 변경될 때마다 onChange 이벤트 핸들러가 실행되어 state를 업데이트하고, 이를 통해 UI가 다시 렌더링된다.
• 간편한 데이터 검증 및 수정: 입력값을 실시간으로 검증하거나 변형하는 로직을 쉽게 구현할 수 있다.

import React, { useState } from 'react';

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

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

  return (
    <div>
      <label>제어 컴포넌트 입력:</label>
      <input type="text" value={value} onChange={handleChange} />
      <p>입력 값: {value}</p>
    </div>
  );
}

export default ControlledInput;

 

장점

• 일관성 유지: 값이 상태에 의해 관리되므로 컴포넌트 내에서 데이터 흐름을 예측할 수 있다.
• 입력 검증 및 변형 용이: 입력 값을 검증하거나, 실시간으로 변경할 때 유용하다.

단점

• 추가 렌더링: 입력값이 바뀔 때마다 state가 업데이트되고 컴포넌트가 재렌더링된다. 많은 컴포넌트에서 사용될 경우 성능이 떨어질 수 있다.
• 복잡성 증가: 단순한 입력 필드에도 state와 이벤트 핸들러가 필요하므로 코드가 복잡해질 수 있다.

---

비제어 컴포넌트 (Uncontrolled Components)

비제어 컴포넌트는 DOM에 직접 접근하여 값을 관리하는 방식으로 React의 state에 의해 제어되지 않는다.

일반적으로 ref를 사용하여 DOM 요소에 직접 접근하여 값을 가져온다.

특징

• DOM 중심의 접근: 입력 필드의 값을 직접 접근하여 사용할 수 있으며 변경을 감지하려면 DOM에서 값을 가져와야 한다.
• 상태가 아닌 참조(ref) 사용: React의 useRef를 사용하여 해당 요소에 접근하고 값을 읽어온다.
• 렌더링 최적화: 상태가 변경되지 않으므로 렌더링이 필요 없으며 많은 양의 입력 필드를 관리할 때 유용하다.

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef();

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

  return (
    <div>
      <label>비제어 컴포넌트 입력:</label>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>값 확인</button>
    </div>
  );
}

export default UncontrolledInput;

 

장점

• 간단한 사용: 별도의 상태 관리가 필요하지 않으므로 코드가 단순하고 간결하다.
• 성능 최적화: 상태가 변하지 않기 때문에 렌더링이 최소화된다.

단점

• 검증 어려움: 입력값을 실시간으로 검증하거나 변형하는 로직을 추가하기 어렵다.
• 예측 가능성 감소: 상태를 통해 관리하지 않기 때문에 React의 데이터 흐름을 따르지 않게 되어 큰 프로젝트에서는 데이터 흐름이 복잡해질 수 있다.

참고문헌

비제어 컴포넌트 – React

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