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

react hook form을 사용했을 때의 장단점에 대해 알아보던 중 제어 컴포넌트(Controlled Component와 비제어 컴포넌트(Uncontrolled Component)에 대해 알게 되었다.

제어 컴포넌트와 비제어 컴포넌트의 구분점은 폼 요소의 상태관리를 컨트롤 하는 방식에서 나뉜다.

 

제어 컴포넌트(Controlled Component)

제어 컴포넌트는 폼 요소의 상태(값)이 리액트의 상태(state)를 통해 관리되는 컴포넌트이다.

사용자의 입력값을 받아서 콘솔에 띄워주는 간단한 제어 컴포넌트의 예시를 작성해보았고 다음과 같다.

export default function ControlledForm () {
	const [name, setName] = useState('');
    
    const handleInputChange = (e) => {
	setValue(e.target.value);
    }
    
    const handleFormSubmit = (e) => {
    e.preventDefault();
    console.log(`이름 : ${name}`);   //abc 출력
    }
    return(
    <form onSubmit={handleSubmit}>
      <label>
        이름:       //abc 입력
        <input type="text" value={name} onChange={handleInputChange} />
      </label>
      <button type="submit">제출</button>
    </form>
   	)
   }

 

state를 통해 이름의 상태를 변경하고 제출하는 간단한 로직이다. 위와 같이 state를 통해 폼의 상태를 제어하는 것을 제어 컴포넌트라고 한다.

제어 컴포넌트의 특징

1. 상태값을 React의 state에 담아 저장한다.

2. 입력값의 변경에 따른 즉각적인 렌더링이 발생한다.

 

제어 컴포넌트의 장,단점

장점

• 명확한 데이터 흐름 : 데이터가 단일 소스(state)에서 관리됨으로 디버깅과 유지보수 측면에서 뛰어나다.
• 즉각적인 유효성 검사 : 입력값이 바뀜에 따라 상태가 즉시 업데이트 됨으로 실시간 유효성 검사가 용이하다.
• 조건부 렌더링 및 동적 UI 구현 : 상태 변화에 따른 UI 구현을 쉽게 할 수 있다.

단점

• 코드 복잡성 증가 : 상태 관리와 이벤트 핸들러와 같은 추가 코드 작성에 따라 코드의 복잡성이 증가할 수 있다.
• 성능 문제 : 매우 많은 입력 필드를 가진 폼에서는 상태 업데이트로 인해 성능이 저하될 수 있다.

비제어 컴포넌트(Uncontrolled Component)

비제어 컴포넌트는 폼의 요소들이 DOM에 의해 직접적으로 관리되는 컴포넌트이다. 
제어 컴포넌트와 같이 React의 state로 상태가 관리되는 것이 아닌 DOM 자체에서 입력값을 추적하며, 주로 ref를 사용하여 입력값에 접근한다. 아래는 제어 컴포넌트와 같이 이름값을 콘솔에 띄워주는 간단한 코드이다.

 

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

  const handleFormSubmit = (e) => {
    e.preventDefault();
    console.log(`이름 : ${inputRef.current.value}`); //abc 출력
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <label>
        이름:        //abc 입력
        <input type="text" defaultValue="가나다" ref={inputRef} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
};

위의 코드와 같이 useRef를 DOM을 조작해 접근한다.

 

비제어 컴포넌트의 특징

1. 입력값이  state에 저장되지 않고 DOM을 통해 직접 조작된다.

2. 상태 관리 로직이 필요 없기에 코드가 간단해진다.

3. defaultChecked, defaultValue등과 같은 default 옵션을 통해 초기값 설정이 가능하다.

 

비제어 컴포넌트의 장,단점

장점

• 간단한 구현: 상태 관리 로직이 필요 없으므로 코드가 간단하고 직관적이다.
• 빠른 초기 설정: 초기값 설정이 용이하며, 단순한 폼에 적합하다.
• 성능: 상태 업데이트가 없으므로 성능에 유리할 수 있다.

단점

• 데이터 흐름 불명확: 데이터가 DOM에 직접 저장되므로, 상태 관리와 동기화가 어렵다.
• 유효성 검사 및 로직 구현 어려움: 입력값에 대한 실시간 유효성 검사나 추가 로직을 구현하기 어렵다.
• 테스트 및 유지보수 어려움: 상태가 React와 분리되어 있어 테스트와 유지보수가 복잡해질 수 있다.

요약

                                                   제어 컴포넌트                                                                             비제어 컴포넌트

상태 관리	React state에 의해 관리됨	DOM에 의해 직접 관리됨
데이터 흐름	단방향 데이터 흐름 (React → UI)	데이터가 DOM에 저장되어 흐름이 불명확함
유효성 검사	실시간으로 가능	폼 제출 시 가능, 실시간 검증 어려움
코드 복잡도	상대적으로 복잡함	단순함
성능	많은 입력 필드 시 성능 저하 가능	상태 업데이트가 없으므로 성능 향상
초기값 설정	defaultValue를 사용하여 설정 가능	defaultValue 또는 defaultChecked 사용
사용 사례	복잡한 폼, 실시간 검증, 동적 UI 구현이 필요한 경우	단순한 폼, 최소한의 상태 관리가 필요한 경우

 

 

어떤 것을 무조건 사용해야 한다보다는 각 제어 컴포넌트와 비제어 컴포넌트의 특성을 이해하고 상황에 맞게 유연하게 사용할 수 있어야 한다.

 

잘못된 정보나 지적사항은 댓글로 남겨주세요!