2023.04.12[비제어 컴포넌트, 프로젝트 리팩토링]

📖오늘 배운  것

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

제어컴포넌트란?

react에 의해서 값이 제어되는 컴포넌트를 말한다. 주로 state로 값을 관리하면서 입력값을 setState로 업데이트할 때 제어 컴포넌트라고 한다. 이러한 방식은 실시간으로 사용자의 입력 값을 추적하며 유효성 검사 등을 할 때 유용하나 계속 렌더링 되기 때문에 불필요한 렌더링이 일어나게 된다.

 

비제어 컴포넌트란?

react에 의해 값이 제어되지 않는 컴포넌트를 의미한다. 이 방식은 주로 ref 로 값을 관리하며 필요한 경우 onSumbit 등의 이벤트 핸들러를 통해 저장된 요소의 값을 가져와 활용하게 된다. 값을 입력할 때마다 불필요한 렌더링이 일어나지 않아 렌더링을 줄일 수 있으나 실시간으로 입력 값을 검색해야하는 경우 적합하지 않다.

 

 

프로젝트 리팩토링

오늘 진행한 프로젝트 리팩토링은 불필요한 리렌더링을 개선하는 것이었다. 이전에 react-hook-form을 사용하긴 했지만 input 값에 포맷터를 적용하면서 급한대로 state로 값을 관리하고 있었다. 하지만 이 경우 react-hook-form으로 관리하지 않기 때문에 입력할 때마다 전체 컴포넌트의 불필요한 렌더링이 일어나게 된다. 따라서 react-hook-form의 Controller를 이용해서 input만 리렌더링될 수 있도록 리팩토링을 진행하였다.

 

 

💭배운 점

 

후...써둔 거 한 번 날라갔지만 이전부터 리팩토링 하고 싶었던 부분을 진행할 수 있어서 기뻤다. 포맷터 라이브러리를 사용했다면 코드가 더 간결해지겠지만 라이브러리를 무작정 사용하는 것 역시 최선의 방법은 아니기 때문에 현재로서도 만족한다. 제어컴포넌트, 비제어 컴포넌트는 많이 들어봤지만 정확히 무슨 개념인지 몰랐는데 이번 기회에 리팩토링 관련 개념을 찾아보면서 알게되어 기쁘다. 이렇게 지식 하나 더 배웠다..!

시간을 효율적으로 사용하고 있는 것 같진 않다.. 그래도 기상 스터디 하면서 오전 시간도 생겼고(더 일찍 일어난다면 더 좋겠지만) 리팩토링도 조금씩 진행중이니까 너무 조급해말고 조금씩 양을 늘려봐야지! 운동도 해야되고!!!