useRef를 선호하시는 이유가 궁금합니다!

Question

지금까지 input 관리를 컴포넌트로 빼서 useCallback과 useState, onChange 메서드를 사용하여 써왔는데 useRef로 관리할 수 있다는 걸 보고 깜짝 놀랐습니다.   개인적인 선호라고 하셨지만 특별히 이유가 있을까 하여 useRef에 대해 찾아보니 useRef는 input value의 상태가 바뀌어도 리렌더링이 안 되는 이점이 있더라구요. 그렇다면 input이 많은 회원가입 같은 form을 만들 때 useRef를 사용한다면 굳이 useCallback이나 useMemo를 쓰거나 여러 개의 useState 를 만들지 않아도 될 것 같다는 생각에 이르더라구요   이러한 이점 때문에 useRef를 쓰시는 것인지 궁금합니다

jaenam · Answer

useState 등을 이용하여 리액트가 직접 폼요소에 개입, 제어하는 방식을 'controlled component(제어 컴포넌트)' 라 하고, 리액트의 간섭을 최소화하고 HTML native 기능을 최대한 활용하는 방식을 'uncontrolled component(비제어 컴포넌트)'라 칭합니다. 제어 컴포넌트는 리액트가 폼요소의 상태변화를 실시간으로 감지하여 바로바로 반응(React)합니다. 예컨대 form 변경시마다 매번 react 코드로 validation check을 하고 싶다거나, form 변경사항을 즉시 다른 곳에도 영향을 주고자 할 때는 이런 제어컴포넌트가 적합합니다. 다만 이런 즉각성 때문에 성능저하는 불가피합니다. 한편 비제어 컴포넌트는 폼요소의 변경사항에 대해 리액트가 일절 관여하지 않습니다. 때문에 기본적으로 리액트의 성능에 영향을 주지 않습니다. 대신 순수 javascript api를 통해 필요한 시점에 리액트에게 정보를 '알려주는' 동작이 필요합니다. 폼요소의 '변경사항'을 즉시 알아야 하는 경우는 그다지 많지 않기 때문에 기본적으로는 비제어 컴포넌트가 더 좋다고 생각하지만, 요구사항에 따라 필요에 따라 두 방식을 취사선택할 수 있으면 더욱 좋겠죠 :)