리액트의 Controlled Component와 Uncontrolled Component의 차이점

Controlled Component

Controlled Component(제어 컴포넌트)는 상태(state)를 통해 입력 값을 제어하는 컴포넌트를 말합니다.
Controlled Component에서는 입력 요소의 값(value)을 state와 동기화하고, 사용자의 입력이 이루어질 때마다 onChange 이벤트 핸들러를 통해 state를 업데이트합니다.
값이 state로 관리되기 때문에 값을 자유롭게 변경할 수 있으며, 입력 시마다 값을 검증할 필요가 있거나 복잡한 폼 데이터를 관리할 때 유용합니다.

Uncontrolled Component

Uncontrolled Component(비제어 컴포넌트)는 입력 값을 state로 관리하지 않고, DOM을 통해 입력 값을 제어하는 빙식입니다.
useRef를 사용해 생성된 참조 객체인 ref를 사용하여 DOM 요소에 직접 접근하여 값을 읽거나 조작합니다.
따라서 Uncontrolled Component는 리액트 상태 관리에 따른 성능적인 비용이 발생하지 않아 간단한 폼에서 사용하기 좋습니다.