리액트 디자인 패턴 - Controlled Pattern과 UnControlled Pattern

목차

• Controlled Pattern
• UnControlled Pattern

Controlled Pattern

React의 Controlled 패턴은 폼 요소의 상태를 React 컴포넌트의 state로 관리하는 방식입니다. 이 패턴을 사용하면 React가 폼의 데이터를 완전히 제어할 수 있게 됩니다.

 

Controlled 패턴의 주요 특징:

1. 상태 관리:
   • 폼 요소의 값을 React의 state로 관리합니다.
   • 사용자 입력에 따라 state를 업데이트합니다.
2. 값 설정:
   • 폼 요소의 value 속성을 state 값으로 설정합니다.
3. 이벤트 핸들링:
   • onChange 이벤트를 통해 사용자 입력을 감지하고 state를 업데이트합니다.

예시 코드:

import React, { useState } from 'react';

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted value:', inputValue);
  };

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

 

Controlled 패턴의 장점:

1. 데이터 일관성: React가 폼 데이터를 완전히 제어하므로 UI와 상태 간의 일관성을 보장합니다.
2. 즉시 유효성 검사: 사용자 입력에 따라 즉시 유효성을 검사하고 피드백을 제공할 수 있습니다.
3. 조건부 비활성화: 특정 조건에 따라 폼 요소를 쉽게 비활성화할 수 있습니다.
4. 값 포맷팅: 입력값을 즉시 포맷팅하거나 변환할 수 있습니다.

주의사항:

1. 성능: 많은 수의 폼 요소가 있는 경우, 각 입력마다 리렌더링이 발생할 수 있어 성능에 영향을 줄 수 있습니다.
2. 복잡성: 간단한 폼의 경우 Uncontrolled 컴포넌트를 사용하는 것이 더 간단할 수 있습니다.

Controlled 패턴은 React에서 폼을 다룰 때 권장되는 방식이며, 특히 복잡한 폼이나 동적인 유효성 검사가 필요한 경우에 유용합니다.

Uncontrolled Pattern

Uncontrolled 패턴은 React에서 폼 요소의 상태를 직접 React의 state로 관리하지 않고, DOM이 내부적으로 관리하도록 하는 방식입니다. 이 방식은 주로 ref를 사용하여 필요할 때만 DOM에서 값을 가져옵니다.

 

Uncontrolled 패턴의 주요 특징:

1. 상태 관리:
   • React의 state를 사용하지 않고 DOM이 자체적으로 상태를 관리합니다.
   • 필요한 경우에만 ref를 통해 DOM에서 값을 읽어옵니다.
2. 값 설정:
   • 초기값을 설정하려면 defaultValue 속성을 사용합니다.
3. 이벤트 핸들링:
   • onChange 이벤트를 반드시 사용할 필요가 없습니다.

예시 코드:

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef(null);

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

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

 

Uncontrolled 패턴의 장점:

1. 간단성: 간단한 폼의 경우 코드가 더 간결해질 수 있습니다.
2. 성능: React의 state를 사용하지 않으므로 입력 시마다 리렌더링이 발생하지 않습니다.
3. 외부 라이브러리 통합: React 외부의 DOM 기반 라이브러리와 통합하기 쉽습니다.
4. 파일 입력: file input과 같이 읽기 전용 값을 다룰 때 유용합니다.

주의사항:

1. 유효성 검사: 즉각적인 유효성 검사나 입력값 변환이 어렵습니다.
2. 동적 UI: 입력값에 따라 UI를 동적으로 변경하기 어렵습니다.
3. 값 초기화: 프로그래밍 방식으로 입력값을 초기화하거나 변경하기 어렵습니다.

Uncontrolled 패턴은 간단한 폼이나 성능 최적화가 필요한 경우, 또는 비-React 코드와의 통합이 필요한 경우에 유용할 수 있습니다. 하지만 React 공식 문서에서는 대부분의 경우 Controlled 컴포넌트를 사용할 것을 권장하고 있습니다.

Controlled와 Uncontrolled 패턴은 각각의 장단점이 있으므로, 상황에 따라 적절한 패턴을 선택하는 것이 중요합니다.