2022-05-08 게시 됨2022-05-08 업데이트 됨FE4분안에 읽기 (약 577 단어)

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

리액트의 제어컴포넌트와 비제어 컴포넌트의 개념에 대해 알아보자

제어 컴포넌트

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

state를 신뢰 가능한 단일 출처로 두고 state에 의해 컴포넌트가 제어된다.

사용자의 입력으로 state를 관리하기 때문에 사용자의 입력값과 state가 실시간으로 동기화된다.

state를 신뢰가능한 단일 출처로 둔다.

즉 사용자의 입력에 따라 state를 변화시키고 state에 의해 업데이트되기 때문에 안정적이다.

때문에 데이터의 유효성을 다룰때에도 훨씬 좋다.

사용자가 입력하는 모든 데이터들에 의해 동기화된다.

가령 <input/>에 text를 제공할 경우 매 타자마자 동기화된다.

=> 이는 쓰로틀링이나 디바운싱을 통해 해결할 수 있다.

비제어 컴포넌트는 state로 관리하는게 아닌 DOM 자체에서 데이터를 관리하는 컴포넌트이다.

보통 state가 아닌 useRef를 관리하여 DOM 엘리먼트의 data를 참조한다.

즉 DOM을 신뢰 가능한 출처로 둔다.

useRef는 매 렌더링마다 동일한 객체를 제공하기 때문에 얕은비교 연산에서 항상 true를 반환한다.

<input/>에 text를 제공할 경우를 생각해보면 매 타자마다 리렌더링 되지 않는다. 때문에 불필요한 렌더링을 줄이는데에 도움이 될 수 있다.

이 방식을 사용하는 대표적인 라이브러리는 react-hook-form이다.