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

리액트 공식 문서

제어 컴포넌트 (Controlled Components)

import React, { useState } from 'react';

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

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

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

• 입력 요소의 값(value)이 컴포넌트의 state에 의해 제어된다.
• 위의 예시에서 input 요소의 값은 React state에 의해 설정되고, 변경될 때마다 state가 업데이트 된다.
• 이 방식으로 입력 요소의 상태를 React가 완전히 제어하게 되므로, React 컴포넌트에 의해 해당 값에 접근하거나 수정할 수 있다.

비제어 컴포넌트 (Uncontrolled Components)

import React, { useRef } from 'react';

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

  const handleButtonClick = () => {
    // input 요소에 직접 접근하여 값을 읽거나 수정
    console.log('Input value:', inputRef.current.value);
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleButtonClick}>Get Input Value</button>
    </>
  );
}

• 입력 요소의 값이 React state에의해 직접 제어되지 않는다.
• DOM 요소에 직접 참조를 사용하여 값을 읽거나 수정할 수 있다.
• 대신 ref를 사용하여 DOM 요소에 직접 참조를 생성하고, 이를 통해 값을 접근하거나 수정할 수 있다.
• 주로 외부 라이브러리와의 통합이나 기존 HTML 양식을 React로 감싸는 경우 사용된다.

요약

제어 컴포넌트

1. 사용자 입력이 있을 때마다 state가 업데이트 되며 이로 인해, 리렌더링이 발생한다.
2. React는 항상 현재 값에 접근 할 수 있다.

비제어 컴포넌트

1. 값이 React 컴포넌트의 state에 의해 직접 제어되지 않고, 값이 변경될 때마다 리렌더링은 발생하지 않는다.
2. 값의 변경 여부를 알기 위해서는 직접 DOM 요소에 접근하여 값을 읽거나, 사용자 이벤트를 통해 값을 가져와야한다.

각각의 컴포넌트 유형을 선택하는 데 있어서는 프로젝트의 요구사항, 상태관리의 편리성, 코드의 가독성, 유지보수성 등 여러 가지 요소를 고려해야한다.

• 제어 컴포넌트를 사용하는 경우
• React의 상태관리가 필요한 경우 : 입력 값에 따라 동적으로 화면을 업데이트하고 이를 React state로 관리하고자 할 때
• Validation 및 상태 추적이 중요한 경우 : 입력 값의 유효성을 검사하거나, 입력값이 변경될 때 특정 작업을 수행하고자 할 때
• 비제어 컴포넌트를 사용하는 경우
• 외부 라이브러리와 통합이 필요한 경우 : 이미 외부에서 제어되고 있는 입력 요소를 React로 감싸고자 할 때
• React의 상태를 사용하지 않고 간편한 구현이 필요한 경우