제어컴포넌트 비제어컴포넌트

제어컴포넌트 : 어플리케이션이 사용자 입력을 제어한다.

실시간으로 값에 대한 피드백이 필요할 때 사용

 

항상 최신상태 유지, 사용자가 입력하는 모든데이터 동기화

 

제어컴포넌트는 사용자가 입력하는 모든 데이터가 동기화 되기 때문에 불필요한 리렌더링 혹은 api요청으로 인한 과부하가 걸릴 수 있다.

이런 경우 보통 debounce를 사용하고 있다. (대부분 debounce 혹은 throttle을 사용할 듯)

 

 

비제어컴포넌트 : 어플리케이션이 사용자 입력을 제어하지 않음

제출시에만 값이 필요할 때 사용

 

사용자의 입력값이 어플리케이션을 업데이트 시키지 않음.

사용자가 직접 트리거하기 전까지 리렌더링이나 업데이트가 되지 않음.

 

ref를 이용하여 form내의 값을 관리하면 불필요한 리렌더링을 방지할 수 있는데, 이러한 비제어 컴포넌트를 사용해 렌더링을 최적화 하는 라이브러리가 react-hook-form 이라고 한다.

 

 

한 눈에 비교하기

아래 gif에서 확인할 수 있다.

 

제어컴포넌트는 사용자가 값을 입력할때마다 컴포넌트가 리렌더링 된다.

한편 비제어컴포넌트는 '확인'버튼을 클릭할때만 레렌더링(업데이트) 된다.

 

https://velog.io/@yukyung/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0

 

---

참고문서