react-hook-form에서 Input은 기본적으로 unControlled합니다. (https://legacy.reactjs.org/docs/uncontrolled-components.html)

register 함수를 사용하면 ref를 사용하게 됩니다. 이러한 접근 방식은 폼이나 어플리케이션에서 input의 값이 바뀔 때나 사용자가 input에 타이핑할 때 발생하는 리렌더링의 양을 줄입니다.

react-hook-form에서 Input은 기본적으로 unControlled합니다. (https://legacy.reactjs.org/docs/uncontrolled-components.html)

register 함수를 사용하면 ref를 사용하게 됩니다. 이러한 접근 방식은 폼이나 어플리케이션에서 input의 값이 바뀔 때나 사용자가 input에 타이핑할 때 발생하는 리렌더링의 양을 줄입니다.

Controller를 사용할 때에도 마찬가지로 해당 컴포넌트에서만 리렌더링 되기 때문에 리렌더링의 양을 줄입니다.

개인적으로는 Controlled Input은 Input의 Rerender을 일으키기 때문에 웬만하면 register를 사용하고 있는데, 가끔 Controlled Input을 사용할 때가 있습니다. (ref를 사용할 수 없을 때나 라이브러리 input을 사용할 때 등등... )

저 같은 경우에는 input 컴포넌트의 value 상태에 의존하는 값들이 여러 군데 존재하는 경우에, input의 값에 의존하는 여러 부분까지 매번 리렌더링이 필요하다고 생각해서 딱히 uncontrolled 한 상태에 이점이 없다고 생각해 Controlled Input을 사용했던 경험이 있습니다.

React Hook Form에서는 Controlled Input을 사용할 때에 useController / Controller 두 가지 API를 제공합니다.

useController와 Controll 컴포넌트의 기능은 같기 때문에, 하나로 통일하면 좋을 것 같다는 생각이 들었습니다(좋은 생각일까요?). 통일해야 한다면, 여러분들은 무엇을 더 선호하시나요??

저는 아래와 같은 이유로 useController를 선호합니다.

• 사용성 측면에서 hook으로 사용하는 useController가 더 편한 느낌이 들었습니다.
• Controller는 Controller 컴포넌트로 감싸기 때문에, 명시적이지 않아 보여서 가독성이 좋지 않다고 느꼈습니다.
• controlled된 데이터를 다른 곳에서도 비교적 편하게 쓸 수 있는 .(hook의 return 값이기 때문에 )

제가 느꼈던 단점은, useController를 사용 시 마다 hook을 여러 이름으로 바꿔줘야 하는게 불편했습니다.

아래에서는 ReactDatePicker를 사용하는 form에 대한 같은 기능을, 각각 useController와 Controller로 구현해보았습니다.

비교해보시면 좋을 것 같습니다.