Difference Between Controlled and Uncontrolled Components | Altogic - Backend as a service platform
Altogic
참고문헌
https://www.altogic.com/blog/difference-between-controlled-and-uncontrolled-component
https://blog.leaphop.co.kr/blogs/33
https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable
요약
비제어 컴포넌트?
'제어'라는 단어의 주체는 React 입니다.
즉, 컴포넌트를 제어한다는 것은 React 관점에서 관리하겠다는 의미이며, 예를 들어 Input Element 의 값을 리엑트는 state 를 통해 추적하고 관리할 수 있습니다.
이러한 의미로 제어하지 않는다는 것은 React 관점에서 관리하지 않는다는 의미입니다.
다시 표현하자면, 비제어 컴포넌트의 값의 변동은 React의 trigger -> render -> commit 으로 이어지지 않습니다. (값이 변경되어도 리렌더링이 되지 않습니다)
비제어 컴포넌트의 값 참조하기
state 를 통해 관리되는것이 아니기에 직접 DOM 에 접근하여 관리하여야 합니다
함수 컴포넌트에서 대표적으로 사용되는 방법은 useRef 훅을 이용하는 것입니다.
참고로 기본 Element의 속성값인 (Input, TextArea 등) value 를 통해 초기값을 설정하고 싶다면, state 로 관리하는것이 아니라면 defaultValue 를 통해 설정해주어야 합니다.
비제어 컴포넌트 사용시 주의점
값이 변화하여도 React내 관리되는 state 가 아니기에 render 가 trigger 되지 않습니다. 이렇기에 추가적으로 값의 변동을 반영하는 로직을 작성해주어야 합니다.
프로젝트의 규모가 커지게 되면 state 로 관리되는 값이 아니기에 debuging 과정이 쉽지 않을 수 있습니다.
매 값의 변동 순간이 최신값이라는 보장을 얻을 수 없습니다. state 의 경우 변화의 흐름을 React가 관리하기에 매 변화순간마다 변경된 값을 기준으로 다시 렌더링을 하거나, side effect 를 발동시킬 수 있습니다. 하지만 비제어 컴포넌트의 경우는 실제 DOM의 value 가 React의 시스템과는 분리되어있기에 따로 확인하는 로직이 필요합니다.
React 에서는 state를 통한 관리가 여러모로 편하고 적합한 방식이라 생각이 듭니다. 크게 성능을 해치지 않는다면 state 를 통해 값을 관리하는것이 좋지만, 이 말은 곧 state의 잦은 변화에 따른 리렌더링 유발로 성능이 저하되는 상황이라면, React로 제어하는 방향에 대해서 다시 고민해볼 필요가 있다고 생각합니다.
(이번 요약글에서는 미처 다루지 못했지만, 흔히 사용하는 React-Hook-Form 패키지의 경우에도 비제어 컴포넌트 방식을 통해 form 내부 값들을 관리하고 있습니다.)
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 11월 21일 오전 12:54
균형을 유지해서 어느 한 상태가 다른 상태를 압도하지 않게 하려면 필요한 것이 있다. 바로 ‘룬샷’을 도모하는 예술가와 ‘프랜차이즈’를 도모하는 병사가 똑같이 사랑받는다고 느껴야 한다는 것. 나약하고 모호한 소리처럼 들릴 수도 있지만, 아주 현실적인 얘기이자 자주 간과되는 요소다.
... 더 보기T
... 더 보기