제어 컴포넌트란?

리액트에서 제어 컴포넌트는 HTML 폼 요소(input, textarea, select, state)에 의해 완전히 제어되는 컴포넌트를 말한다.

즉, 사용자가 입력한 값은 리액트의 상태로 저장되며, 이 상태가 업데이트 될 때마다 입력 필드의 값도 동기화 된다.

---

특징

1. 상태로 값 관리

• 폼 요소의 값(value)이 리액트의 상태(state)에 저장된다.
• 상태 변경은 주로 onChange 이벤트를 통해 이루어진다.

2. 단반향 데이터 흐름

• 폼 요소의 값은 상태로부터 설정되므로 데이터이 흐름이 명확하다.
• 상태가 업데이트되면 입력 필드의 값도 즉시 반영된다.

3. 유효성 검사와 로직 포함 가능

• 입력 값에 대한 유효성 검사나 동작을 쉽게 추가할 수 있다.

---

제어 컴포넌트의 구조

 

기본 구조

1. state를 사용하여 초기 값을 설정한다.

2. onChange이벤트 핸들러를 통해 상태를 업데이트 한다.

3. 상태를 value속성으로 바인딩한다.

import React, { useState } from "react";

function ControlledComponent() {
  const [value, setValue] = useState(""); // 상태로 폼 값을 관리

  const handleChange = (event) => {
    setValue(event.target.value); // 상태 업데이트
  };

  const handleSubmit = (event) => {
    event.preventDefault(); // 기본 동작(페이지 새로고침)을 막음
    alert(`입력된 값: ${value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

export default ControlledComponent;

 

---

 

제어 컴포넌트의 장점

1. 데이터 흐름이 명확 : 상태를 통해 입력 값을 관리하므로 데이터 흐름을 추적하기 쉽다.

2. 동적인 검증 가능 : 입력 값에 대해 실시간으로 유효성 검사를 수행할 수 있다.

3. 다양한 동작 제어 가능 :  입력 값에 따라 버튼 활성화, 에러 메시지 표시 등의 동작을 쉽게 구현할 수 있다.

---

 

제어 컴포넌트의 단점

1. 코드가 길어짐

• 모든 폼 요소를 상태로 관리하다 보면 코드가 길어질 수 있다.
• 폼의 크기가 커질수록 복잡도가 증가한다.

2. 성능 문제

• 상태 업데이트가 많아지면 리렌더링이 자주 발생할 수 있다.
• 이를 해결하기 위해 필요한 경우 성능 최적화(React.memo, useCallback)를 적용해야 한다.

---

 

제어 컴포넌트와 비제어 컴포넌트 비교

특징	제어 컴포넌트	비제어 컴포넌트
데이터 관리	상태(state)를 통해 제어	DOM요소의 값 참조(ref)
코드의 명확성	데이터 흐름이 명확	데이터 흐름이 덜 명확
실시간 데이터 처리	가능	별도의 처리 필요
구현 난이도	상대적으로 높음	상대적으로 낮음
추천 사용 사례	복잡한 폼, 유효성 검증이 필요한 경우	간단한 입력 필드, 초기값만 필요한 경우