참고문헌

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 내부 값들을 관리하고 있습니다.)