React - 제어 컴포넌트 vs 비제어 컴포넌트

비제어 컴포넌트는 ref 를통해 form element에 접근한다.

그래서 input value에 접근할때가 최종적인 버튼을 누르는 상황에만 접근한다.

그래서 화면을 재 렌더링 하는 순간이 버튼을 누르는 그 순간이지만, 사용자의 입력의 가장 최신값에는 접근이 힘들다.

 

반면에 제어 컴포넌트는 사용자의 입력에 따라 state가 동기화 된다.

대표로 onChange()가 있고, input 유효성 검사를 할 때 용이하다.

항상 최신 값을 유지하는 특성에 따라, 현재 input의 value가 유효한지 안한지에 대해 검사를 실시간으로 한다.

그런데, 사용자 입력이 있을 때 마다 재 렌더링이 되어서, 불필요한 재 렌더링이 될 수도 있다.