React controlled vs uncontrolled

silverj-kim·2024년 10월 23일
0

제어 컴포넌트 controlled component

컴포넌트의 state나 props로 주어진 값을 활용하는 컴포넌트
<input>에서 value를 state로 관리하는 경우

비제어 컴포넌트 unControlled component

html 요소 자체적으로 상태를 가져 useState로 상태를 관리하지 않는 컴포넌트다.
<input>에 값을 입력하면 해당 값은 입력 폼 내부의 상태로 관리된다.

ref를 이용하여 요소의 상태에 접근할 수 있으며 상태가 변화하여도 리렌더링이 이루어지지않아 리액트는 변화를 감지하지 못한다.

데이터와 UI의 동기가 이루어지지 않는다.
입력이 변경될 때 유효성 검사를 하는 작업 등이 불가능하다.

profile
Front-end developer
post-custom-banner

0개의 댓글