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

react-hook-form 라이브러리에 대한 강의를 듣다가 비제어 컴포넌트(uncontrolled component)에 대해서 알게 되었고, 그렇다면 제어 컴포넌트와 비제어 컴포넌트의 각각의 특징과 차이점은 뭘까?라는 궁금증으로 생각이 가지를 뻗어가면서 읽어본 블로그인데, 공식문서를 우선적으로 읽어본 후에 이해가 안가는 부분이 있을 경우 아래 블로그를 참고하면 제어 컴포넌트와 비제어 컴포넌트에 대한 이해도가 높아질 것이라고 생각된다.

 

기존에 사용하고 있던 방식이 제어 컴포넌트였다는 것도 다시 한번 알게 되었고, 그렇다면 비제어 컴포넌트는 어떤 상황에서 사용할 수 있을까?를 생각해봤을 때 단순한 로그인 기능 (조건부 버튼 비활성화 기능 없는 거)이나 검색 기능(실시간 조회 X), 유효성 검사가 들어가지 않는 input 등등이 있을 것 같고,  제어 컴포넌트와 비제어 컴포넌트 각각의 장단점이 뚜렷하기 때문에 이런 방식이 있구나 알아두고 상황에 맞춰 판단하는 것이 좋을 거 같다.

 

React: 제어 컴포넌트와 비제어 컴포넌트의 차이점