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

사이드 프로젝트를 진행하면서 

제어컴포넌트와 비제어컴포넌트에 대해 알게되었다.

 

 

리액트에서 input을 이용하는 방식 중에

state와 onChange를 이용해 실시간으로 

value를 감지하며 input을 제어하는 방식이랑

 

ref로 렌더링은 일으키지 않으면서

input의 value값만 취하는 방식이 있다

라는 정도만 알고 있었는데

 

정확한 명칭이 있었다..

 

 

같이 프로젝트 하는 분께서

https://legacy.reactjs.org/docs/uncontrolled-components.html

Uncontrolled Components – React

이 링크를 주시면서

공식문서를 읽어보면 좋을 것 같다고 하셨다.

 

react에 의해서 값이 제어되는 컴포넌트를

제어 컴포넌트라고 부르고

react에 의해 값이 제어되지 않는 컴포넌트를

비제어 컴포넌트라고 부른다.

 

공식문서에서는 대부분의 경우 

제어컴포넌트를 사용하는게 옳다고 표현하고 있지만

제어 컴포넌트는 아무래도 입력할 때마다 렌더링을 하기 때문에

불필요하게 렌더링되거나 API를 호출 할 수 있다.

 

애초에 기획자체가

실시간 검색기능이 필요하고

추천검색어를 띄워줘야할 땐 어쩔 수 없지만 

리렌더링과 네트워크요청이 계속 일어나게 되므로

과도하게 input을 입력한다면 성능상의 문제가 생길 수 밖에 없다고 한다.

 

보통 input을 제어컴포넌트로 다루는 경우는 

1. 유효성 검사

2. 실시간으로 필드 검사

3. 조건에 따라 버튼 활성여부가 바뀌는 경우

(실시간 값에 대한 조건렌더링)

이 정도일텐데 

 

그 외의 경우 ( input의 최종 값만 필요한 경우 ) 라면

ref를 활용한 비제어 컴포넌트가 좋은 대안이 될 것 이다.

 

아래는 제어컴포넌트와 비제어컴포넌트를

언제 사용하면 좋을 지 알려주는 표이다.

 

 제어 컴포넌트와 비제어 컴포넌트의 가장 큰 차이점은 

제어컴포넌트는 동기화 된다는 것이며

폼 개발 시에는 제어 컴포넌트를 사용하길 권장한다.

 

 

하지만 지금 하고있는 사이드 프로젝트에서 

React-hook-form을 사용하고 있고

이 라이브러리는 비제어 컴포넌트로 폼을 개발하고 다루기 때문에

어떻게 다른지에 대한 차이를 좀 더 명확히 알 수 있는 좋은 경험이었다.

 

 

 

 

 

출처: https://itprogramming119.tistory.com/entry/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-VS-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8