리액트 form 데이터를 다룰 때 제어 컴포넌트와 비제어 컴포넌트를 선택하는 기준이 있을까요?

안녕하세요~ 저는 보통 form 데이터 변경에 따라 컴포넌트도 렌더링되야 한다면 '제어 컴포넌트'로 구현하고 그게 아니라면 '비제어 컴포넌트'로 구현합니다. 유스케이스로는 input 입력마다 서버로 API를 보내거나 (디바운스 처리를 하는게 좋습니다) 특정 유효성 검사를 처리해야하는 경우, 입력을 마친 뒤 버튼을 통해 유효성 검사를 하거나 API를 요청하는 경우 정도를 생각할 수 있겠네요 '동기화'를 기준으로 선택하면 될 것 같습니다.

성원님이 잘 설명해주셨는데요, 제어/비제어 방식이 갖는 장, 단점도 고려하셔야 합니다. 제어 방식의 경우 컴포넌트 state로 관리하고 항상 동기화가 이루어지기 때문에 복잡한 요구사항이 생기더라도 처리가 좀 더 쉬워집니다. 단점은 '동기화'에 대한 비용입니다. 만약 50개의 input이 있고 그걸 모두 제어 컴포넌트로 관리한다고 하면, 1글자만 쳐도 50개의 input이 모두 렌더링이 됩니다. 이런 경우에 useMemo 같은 별도의 최적화 작업이 필요해지며, 만약 form이 엄청 복잡한 구조(Array안에 Object안에 Array...)를 갖는 경우 골치가 더욱 아파집니다. 최근에 react-hook-form 라이브러리가 인기를 얻는 것도 이런 form 상태 관리를 성능 영향 없이 쉽게 처리할 수 있도록 구현한 덕분입니다. 비제어 방식의 경우 이벤트 핸들러(onChange, onBlur 등)로만 처리하기 때문에 제어 방식의 단점이 가진 "동기화 비용"이 0 입니다. 단점은 상태 동기화가 불가능하기 때문에 특정 요구사항 구현(ex: 다른 컴포넌트의 상태가 바뀌었을 때 해당 컴포넌트의 상태를 변경)이 어렵습니다. 실제로 서비스를 만들다 보면 다른 컴포넌트의 state에 의존하는 경우가 많아서 제어 방식으로 구현해야 하는 경우가 많이 생깁니다. react-hook-form 라이브러리의 경우 특이하게 비제어 방식을 사용하되, state가 아닌 ref를 사용해서 컴포넌트를 제어합니다. 제어 컴포넌트의 단점인 성능 이슈를 다른 방법으로 해결한 것이죠. ref를 input에 매핑해서 처리하면 브라우저 화면의 DOM을 직접 수정하기 때문에 다른 React 컴포넌트에 불필요한 리렌더링이 일어나지 않는 장점이 있습니다. 뿐만 아니라 에러 처리, 써드파티 라이브러리와의 연동, 에러 발생 시 해당 input 자동 포커스 기능 등 흔히 개발자들이 맞닥뜨리는 케이스들을 구현해놓아서 도입을 고려해보시는것을 추천드립니다.