제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇인가요?

제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 React에서 폼(form) 요소를 다룰 때 사용되는 두 가지 접근 방식입니다. 이 두 방식은 폼 입력값을 다루는 방식과 관련이 있습니다.

제어 컴포넌트 개념

제어 컴포넌트는 React의 상태(state)를 사용하여 폼 입력값을 관리합니다. 폼 입력 요소에 대한 값은 컴포넌트의 state에 저장되고, 이 값은 컴포넌트의 state가 업데이트됨에 따라 변경됩니다. 이때, 입력 요소의 값은 항상 컴포넌트의 state와 동기화됩니다.

제어 컴포넌트의 사용 예시

예를 들어, 제어 컴포넌트로 입력 요소를 다루는 예시를 살펴보겠습니다:

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
    };
  }

  handleChange(event) {
    this.setState({ inputValue: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('Submitted value:', this.state.inputValue);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleChange}
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

위의 예시에서 ControlledComponent는 input 요소의 값을 this.state.inputValue로 설정하고, handleChange 메서드를 사용하여 input 값의 변경을 감지하고 상태를 업데이트합니다. 폼 제출 시 handleSubmit 메서드가 호출되며, this.state.inputValue를 출력합니다.

비제어 컴포넌트의 개념

비제어 컴포넌트는 React의 상태(state)를 사용하지 않고, DOM에 직접 접근하여 폼 입력값을 다룹니다. 폼 입력 요소의 현재 값을 DOM에서 직접 가져올 수 있으며, React의 상태 관리 기능을 사용하지 않기 때문에 컴포넌트의 state가 업데이트되어도 입력 요소의 값은 변경되지 않습니다.

비제어 컴포넌트의 사용 예시

비제어 컴포넌트를 사용하는 예시를 살펴보겠습니다:

class UncontrolledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('Submitted value:', this.inputRef.current.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

위의 예시에서 UncontrolledComponent는 ref를 사용하여 input 요소에 접근하고, 폼 제출 시 handleSubmit 메서드에서 this.inputRef.current.value를 사용하여 입력 요소의 값을 가져옵니다.

각각의 장단점

제어 컴포넌트는 React의 상태 관리 기능을 활용하여 폼 입력값을 관리하며, 입력 값의 유효성 검사, 변경 이벤트 처리 등을 구현하기 편리합니다. 반면에 비제어 컴포넌트는 React의 상태 관리 기능을 사용하지 않으므로 코드가 간결해질 수 있으며, 외부 라이브러리와의 통합이 필요한 경우에 유용할 수 있습니다. 그러나 비제어 컴포넌트는 React의 상태 관리 기능을 활용할 수 없기 때문에 일부 제어적인 요구사항을 다루기 어려울 수도 있습니다.