제어/비제어 컴포넌트(2)

이전 스터디 

https://salangdung.tistory.com/351

제어/비제어 컴포넌트(1) SSOT원칙

이전 스터디에서는 SSOT, 제어/비제어 컴포넌트의 정의 및 비제어컴포넌트가 SSOT 원칙에 왜 위배되는 것인지에 대해 포스팅을 했다. 동료들과 스터디 내용을 공유하면서 더 깔끔하게 이해된 부분이 있어서 오늘은 이 부분에 대해 포스팅해보려고 한다. 

 

제어/비제어 컴포넌트 사용 시점

제어 컴포넌트를 사용해야 하는 경우는 크게 4가지이다.

1. 상태 관리를 통한 UI 동기화가 필요한 경우
   사용자가 입력한 데이터가 React 컴포넌트의 상태에 직접 만영되고, 이 상태가 다시 UI에 영향을 미치는 경우 
2. 입력 데이터의 검증 및 처리 
   사용자가 입력한 데이터를 즉시 검증하거나, 입력 내용에 따라 다른 동작을 유발해야 하는 경우 
3. 폼의 초기값 설정 및 변경
   폼의 초기값을 프로그램 적으로 설정하거나, 특정 이벤트에 의해 입력 필드의 값을 변경해야 할 때
4. 외부 상태와 동기화 (Redux, MobX 등 제어컴포넌트) 

실제 예시로는 동적 폼 필드(ex. 로그인 폼), 검색 필터, 실시간 채팅 애플리케이션 등이 있다. 

참고 : 제어/비제어 컴포넌트의 이해(사용시점)

제어 컴포넌트의 이해

 

 

제어/비제어 컴포넌트 구현 방식 비교

 

제어 컴포넌트 input 안에 텍스트를 입력했을 때 개발자 도구상에서도 입력한 데이터가 보이는 것을 확인수 있다. 하지만 비제어 컴포넌트로 데이터를 입력했을 경우에는 데이터의 변경을 확인할 수 없다. 

 

• 제어 컴포넌트는 React의 상태로 관리되기 때문에 상태 변경이 React 개발자 도구에서 바로 확인 가능하다.
• 비제어 컴포넌트는 DOM에 의해 직접 관리되므로, 개발자 도구에서는 상태 변화를 추적할 수 없으며, 직접 DOM에서 값을 가져와야 확인할 수 있다.

 

Next... 제어/비제어 컴포넌트를 이용한 라이브러리 비교 

 React 공식문서에서 제어 컴포넌트로 구현시 데이터를 변경하기 위해 이벤트 핸들러를 작성하고 또 State로 모든 입력 상태를 관리하기 때문에 많은 코드가 들어가고 이를 대체하기 위해 비제어 컴포넌트를 알려줬다. 완전한 해결책으로는  formik를 추천했다. 따라서 Formik에 대해 알아보고 Formik 라이브러리를 적용한 코드를 설명하려고 했었다.

스터디 중 React-hook-form 도 많이 쓰이며 같이 공부하고 비교해 보자는 요구사항이 있어서 로그인 폼을 각각 formik과 React hook form으로 구현해 보고 비교해 보기로 했다. 살짝 보았을 땐 제어 컴포넌트 기반  formik,  비제어 컴포넌트 기반 react-hook-form 이였다. 

참고 : [React] react-hook-form, formik, rc-field-form 폼 관리 어떤 걸로 해야 할까