[React] 제어 컴포넌트와 비제어 컴포넌트란

제어 컴포넌트

제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 한다.

React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state속성에 유지되며 setState()에 의해 업데이트 된다.

 

즉 폼 엘리먼트를 리액트가 제어하는 방식으로 제어 컴포넌트가 동작한다.

1. 사용자가 input 엘리먼트에 값을 입력한다.

2. input 엘리먼트에 새로운 데이터가 입력될 때 마다 setState를 통해 미리 정의한 state를 변경한다.

3. input 엘리먼트의 밸류에는 변경된 state를 할당한다.

 

비제어 컴포넌트

비제어 컴포넌트는 ref를 통해 form 엘리먼트에 접근한다. 따라서 기존 바닐라자바스크립트와 비슷하다. 만약 submit을 하는 상황이라면 submit 할 때 실행되는 함수 내에서 ref를 통해 form 내 밸류들에 접근한다.

 

 

제어컴포넌트와 비제어 컴포넌트의 차이

가장 큰 차이점은 동기화 이다. 제어 컴포넌트는 사용자가 입력할 때마다 state가 동기화 된다. 따라서 input의 유효성 검사를 할 때 제어 컴포넌트가 용이하다.

반면 비제어 컴포넌트는 버튼을 누르는 최종 상황에만 밸류에 접근하므로 리렌더링이 계속 발생하진 않는다. 그만큼 비제어 컴포넌트는 사용자 입력의 가장 최신값에 접근하기 힘들다.