input form 데이터 땡겨올 때 useRef를 많이 사용하지 않는 이유가 있나요?

보통 React가 직접 상태 제어를 하는 방식을 제어 컴포넌트(Controlled Components)라고 부르며, 브라우저의 DOM이 상태 제어를 하도록 자연스럽게 두는 방식을 비제어 컴포넌트(Uncontrolled Components)라고 합니다. React의 `useState()` hook나 `useState()`를 내부적으로 호출하는 `useInput()`과 같은 커스텀 hook 함수를 사용하면 제어 컴포넌트가 되며, React의 `userRef()` hook을 사용하면 비제어 컴포넌트가 되지요. `useRef()` hook를 사용하면 굳이 상태 저장 변수와 상태 변경 함수가 짝으로 필요가 없으며 `<input>` 요소에 `ref` prop만 넘겨주면 되서 개발이 좀 더 간편하게 느껴질 수 있습니다. 또한 말씀하신 것처럼 상태가 변할 때 마다 다시 랜더링이 일어나지 않기 때문에 성능상 이점도 있는 것도 사실이죠. (하지만 React가 얼마나 빠른지를 생각해보면 이 부분은 논쟁의 여지가 있기도 합니다.) 하지만 React의 공식 문서를 보시면 아래와 같이 대부분의 경우에는 양식(form) UI를 구현할 때 제어 컴포넌트를 사용하라고 권장하고 있습니다. > In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. (출처: https://reactjs.org/docs/uncontrolled-components.html) 양식 UI를 구현할 때 React를 통해서 상태 관리를 하면 브라우저의 DOM을 통해서는 어려운 좀 더 섬세한 상태 제어가 가능하고 입력값 검증이 용이해집니다. 예를 들어 유효하지 않은 입력 값에 대해서 시각적인 피드백을 주거나, 하나의 입력 값이 다른 입력 값에 영향을 줄 수 있는 경우를 생각해볼 수 있겠습니다. 이러한 기능을 `useRef()`을 사용해서 구현하는 것이 아예 불가능하지는 않겠지만, `useState()`을 사용하면 상대적으로 훨씬 더 쉽게 구현할 수 있습니다. 게다가 이러한 경우에는 어차피 다시 랜더링을 해줘야하기 때문에 오히려 자동으로 랜더링이 일어나지 않는 부분이 단점으로 작용할 수 있습니다. 따라서 이렇게 "알아서 반응하는" React의 장점을 극대화하시려면 일반적으로 `useState()`의 사용을 먼저 고려하시는 것이 유리하며, `useRef()`는 사실 양식 UI를 구현할 때 보다는 다른 좀 더 제한적인 상황에서 빛을 발휘하는 경우가 많습니다. 이 부분에 대해서는 제가 따로 정리한 블로그 포스팅을 아래에 공유드리오니 한 번 읽어보시면 도움이 될 것 같습니다. - React Hooks: useRef 사용법: https://www.daleseo.com/react-hooks-use-ref/ - React로 비제어 양식 UI를 만드는 방법: https://www.daleseo.com/react-uncontrolled-components/