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

Controlled Component

리액트 상태를 통해 입력값을 제어하는 컴포넌트
입력 요소의 값을 리액트 상태와 동기화하고, 사용자 입력을 변경할 때마다 onChange 이벤트 핸들러를 통해 상태를 업데이트함
ex - useState를 활용한 input value 제어
value는 리액트 상태로 관리, onChange 이벤트가 발생할 때마다 상태가 업데이트 됨.
장점은 입력값이 리액트의 상태로 관리되므로, 입력값을 쉽게 검증하고, 변경, 복잡한 폼 로직을 처리하는데 유리

Uncontrolled Component

리액트의 상태가 아닌, DOM 자체가 입력 값을 지어하는 방식
입력 요소의 값은 DOM에서 직접 관리, 리액트는 제어하지 않음
ref를 사용하여 DOM요소에 직접 접근해 값을 읽어오거나 조작
input과 관련된 ref는 useRef를 사용해 생성된 참조 객체로, 입력값을 직접 접근하고 조작
Uncontrolled Component는 상대적으로 간단한 폼이나 초기값이 중요한 상황에서 사용 가능

ref를 사용하면 DOM을 통해 직접 접근하여 값을 읽어오니, 단순한 입력 필드가 포함된 폼에서 ref를 사용하는 것이 더 간단하고 성능이 좋음. 제출 버튼을 클릭했을 때만 입력값을 가져오면 되는 경우

값을 입력할 때마다 유효성 검증을 실시간으로 해줘야하면 Controlloed Component가 좋음