MUI Autocomplete와 react-hook-form Controller의 올바른 사용 방법
만약 커스텀 Material UI Autocomplete 컴포넌트를 사용하고 있고, 이를 react-hook-form과 연결하려고 한다면, 이를 위해 react-hook-form의 Controller를 사용하는 것이 올바른 방법입니다. 이 블로그 포스트에서는 defaultValue에 의존하지 않고 이를 실현하기 위해 필요한 단계들을 알아보겠습니다.
Material UI Autocomplete 컴포넌트 설정하기
먼저, Material UI Autocomplete 컴포넌트를 설정해보겠습니다. Autocomplete 컴포넌트는 {_id:”, name: ”} 구조를 가진 객체를 받아서, name을 표시하고 옵션을 선택할 때 해당 _id를 반환합니다.
<Autocomplete
options={options}
getOptionLabel={option => option.name}
getOptionSelected={(option, value) => option._id === value._id}
onChange={(event, newValue, reason) => {
handler(name, reason === 'clear' ? null : newValue._id);
}}
renderInput={params => <TextField {...params} {...inputProps} />}
/>이것은 defaultValue에 의존하지 않고 react-hook-form과 함께 Material UI Autocomplete를 사용하는 방법에 대한 작동 예시입니다. 하지만, 우리는 정식 양식 등록을 위해 Controller 컴포넌트의 장점들을 활용하려고 합니다.
Controller 컴포넌트 사용하기
react-hook-form의 Controller 컴포넌트를 사용하기 위해 몇 가지 조정이 필요합니다. 먼저, Autocomplete 컴포넌트에서 onChange 함수를 제거합니다. 왜냐하면 값을 Controller 컴포넌트가 제공하는 onChange 함수에 전달할 것이기 때문입니다. 추가적으로 onChange 함수에서 값을 직접적으로 설정하여 정식 등록이 이루어질 수 있도록 해야 합니다.
<Controller
name="country"
as={
<Autocomplete
options={options}
getOptionLabel={option => option.name}
getOptionSelected={(option, value) => option._id === value._id}
renderInput={params => (
<TextField {...params} label="Country" />
)}
/>
}
onChange={([, { _id }]) => _id}
control={control}
/>이 구현은 react-hook-form이 제공하는 Controller 컴포넌트를 사용하여 필드를 양식에 등록합니다. useEffect 훅을 필요로 하지 않으며, 정식 등록을 보장합니다.
비제어 값 상태 오류 해결하기
Controller 컴포넌트를 구현한 후에, “A component is changing the uncontrolled value state of Autocomplete to be controlled.”라는 콘솔 오류가 발생할 수 있습니다. 이를 해결하기 위해, Controller 컴포넌트에 defaultValue를 추가할 수 있습니다. 하지만, 이 기본 값이 옵션 배열의 일부가 아니어야 합니다. 왜냐하면 이러한 필드들이 양식에서 필수가 아니기 때문입니다.
<Controller
name="country"
as={
<Autocomplete
options={options}
getOptionLabel={option => option.name}
getOptionSelected={(option, value) => option._id === value._id}
renderInput={params => <TextField {...params} label="Country" />}
/>
}
onChange={([, { _id }]) => _id}
defaultValue={null}
control={control}
/>defaultValue에 null 값을 제공함으로써, “uncontrolled value state” 오류를 해결하고 필드가 예상대로 작동하도록 할 수 있습니다.
마무리
Material UI Autocomplete 컴포넌트와 react-hook-form의 Controller 컴포넌트를 성공적으로 사용하기 위해서는 몇 가지 조정과 두 라이브러리 간의 상호작용에 대한 이해가 필요합니다. 이 블로그 포스트의 단계를 따라가면, 이러한 컴포넌트들을 올바르게 통합하고 매끄럽게 양식 검증을 실현할 수 있습니다.
기억해주세요, react-hook-form의 Controller는 양식 등록과 검증을 위한 강력한 기능들을 제공하며, 여러분이 손쉽게 견고하고 사용자 친화적인 양식을 구축할 수 있도록 도와줍니다.
이 문제를 해결하는 데 도움이 되었기를 바랍니다! 추가 질문이 있으시면 언제든지 질문해주세요. 즐거운 코딩하세요!
참고 자료 :
같은 카테고리의 다른 글 보기 :
