React의 제어 컴포넌트와 비제어 컴포넌트의 차이점은?

React에서 제어 컴포넌트와 비제어 컴포넌트는 폼 요소의 상태 관리 방식에 따라 구분됩니다.

제어 컴포넌트는 React 컴포넌트의 상태(state)가 폼 요소의 값을 제어합니다. 즉, 폼 요소의 값은 React state에 저장되고, state가 변경될 때마다 폼 요소가 업데이트됩니다. onChange 이벤트 핸들러를 통해 state를 업데이트하는 방식으로 구현됩니다. 데이터 흐름을 예측하기 쉽고, 유효성 검사 등을 중앙 집중적으로 관리할 수 있다는 장점이 있습니다.

반면, 비제어 컴포넌트는 폼 요소의 값을 React state가 아닌 DOM 자체에 저장합니다. ref를 사용하여 DOM 요소에 직접 접근하여 값을 가져오거나 설정합니다. 초기값 설정이나 특정 상황에서만 값을 읽어올 때 유용하지만, React의 데이터 흐름에서 벗어나기 때문에 상태 관리가 복잡해질 수 있습니다.