[React] Uncontrolled Component, Controlled Component

Uncontrolled Component

Uncontrolled Component는 DOM에서 직접 데이터를 제어하는 방식으로 작동한다. React에서는 ref를 사용하여 DOM 요소에 직접 접근할 수 있는데, 이 방식이 바로 Uncontrolled Component의 특징이다.

예시 코드

import { useRef } from 'react';

const UncontrolledComponent = () => {
  const inputRef = useRef(null); // useRef를 통해 input에 직접 접근

  const handleSubmit = e => {
    e.preventDefault();
    console.log(inputRef.current.value); // DOM을 통해 값에 접근
  };

  return (
    <form>
      <input type='text' placeholder='uncontrolled' ref={inputRef} /> 
      <button onClick={handleSubmit}>Submit</button>
    </form>
  );
};

export default UncontrolledComponent;

주요 특징

• ref를 통해 DOM 요소에 접근하여 값을 가져옴

• 컴포넌트 내부의 state가 아닌 DOM에서 관리되는 값을 사용하는 방식

• 양식 유효성 검사를 하려면 값을 읽은 후 추가적인 검사를 해야 하며, 값이 유효하지 않을 가능성이 존재

• 상태가 예측 불가능할 수 있으며, 컴포넌트가 DOM의 참조를 잃을 경우 데이터 제어가 어려워질 수 있음

Controlled Component

Controlled Component는 React의 state를 통해 데이터를 제어하는 방식이다. 즉, 입력 값이 React 컴포넌트의 상태에 의해 관리된다.

예시코드

import { useState } from 'react';

const ControlledComponent = () => {
  const [inputText, setInputText] = useState(''); // state를 사용하여 값 관리

  const handleSubmit = e => {
    e.preventDefault();
    console.log(inputText); // state에 저장된 값 출력
  };

  return (
    <form>
      <input
        type='text'
        placeholder='controlled'
        value={inputText} // 상태가 값으로 관리됨
        onChange={e => setInputText(e.target.value)} // 입력에 따라 state 업데이트
      />
      <button onClick={handleSubmit}>Submit</button>
    </form>
  );
};

export default ControlledComponent;

주요 특징

• state를 통해 폼 필드 값을 제어

• 컴포넌트 내부의 state가 아닌 DOM에서 관리되는 값을 사용하는 방식

• 입력 값이 state에 저장되고, 입력 값의 변동은 onChange 이벤트를 통해 관리

• 상태가 예측 불가능할 수 있으며, 컴포넌트가 DOM의 참조를 잃을 경우 데이터 제어가 어려워질 수 있음

• React의 컴포넌트 수명 주기와 상태가 잘 연동되어 있으며, 폼 요소와 데이터 제어가 매우 일관됨

Controlled Component와 Uncontrolled Component의 차이점

구분	Controlled Component	Uncontrolled Component
데이터 제어 방식	상태(state)를 통해 데이터 제어	DOM에서 직접 데이터를 제어 (Ref를 통해 접근)
유효성 검사	간단하게 상태를 이용해 실시간 유효성 검사가 가능	DOM에서 값을 읽은 후 추가 검사를 해야 함
컴포넌트와 데이터의 연동성	React의 상태와 데이터가 연동되어 예측 가능하고 관리가 용이	컴포넌트가 참조를 잃거나, 상태가 예측 불가능할 수 있음
복잡도	입력값 제어와 유효성 검사를 동시에 쉽게 처리 가능	상대적으로 간단하나 유효성 검사가 어렵고, 예측이 불가능할 수 있음

스스로 질문

질문 1: Controlled Component와 Uncontrolled Component의 차이점은 무엇인가요?

Controlled Component는 상태(state)를 통해 입력 필드의 값을 제어하는 반면, Uncontrolled Component는 DOM 요소에서 직접 값을 가져온다. Controlled Component는 onChange 이벤트를 사용해 입력 값을 실시간으로 업데이트하며, 양식 유효성 검사가 용이합니다. 반면 Uncontrolled Component는 ref를 사용해 DOM에 접근하여 데이터를 읽어오며, 유효성 검사를 위해 추가적인 작업이 필요하다.

질문 2: Controlled Component와 Uncontrolled Component 중 어느 것이 더 좋은가요?

상황에 따라 다르다. 일반적으로 Controlled Component가 더 권장된다. 상태를 통해 값이 관리되기 때문에 예측 가능하며, 실시간 유효성 검사와 데이터 관리를 용이하게 할 수 있다. 그러나 간단한 폼이나 DOM 직접 접근이 필요한 경우에는 Uncontrolled Component를 사용할 수 있다.