React Hook Form으로 회원가입 폼을 구현하던 중, Kakao 주소 API와 연동하는 과정에서 Redux Toolkit 상태가 정상적으로 업데이트되지 않는 문제가 발생하였다. 이 글에서 문제 상황, 원인, 해결 방법을 공유하고자한다.
여기서 잠깐!
React Hook Form이 뭘까?
React Hook Form은 React 애플리케이션에서 폼을 간단하고 효율적으로 관리할 수 있도록 돕는 라이브러리이다.
- 가볍고 빠른 성능: 불필요한 리렌더링을 줄여 성능을 최적화한다.
- 편리한 검증 기능: 내장된 유효성 검사를 통해 간편하게 검증 기능을 사용할 수 있다.
문제 상황
React 프로젝트에서 회원가입 폼의 입력 항목을 React Hook Form을 사용하여 관리하였다.
그 중에서 주소 입력은 Kakao 주소 API를 통해 사용자로부터 값을 받아와 Redux Toolkit으로 상태를 관리하였다.
문제 상황
- Input 필드로 입력한 값은 Redux 상태에 정상적으로 업데이트
- Kakao 주소 API에서 받은 값은
onSubmit함수에서 제출된data객체에 반영되지 않음
즉, 카카오 API 로 입력된 값이 폼 데이터로 저장되지 않고 제출 시 빈 값으로 전달
문제 원인
문제를 분석한 결과, React Hook Form의 setValue 메서드를 사용하지 않은 점이 원인이었다.
1. Kakao 주소 API에서 반환된 데이터를 React Hook Form과 연동하지 않았음
2. React Hook Form은 해당 필드의 값이 업데이트되었다는 정보를 알지 못해 상태 관리에 문제가 발생
문제 해결 방법
1. Redux 상태 로직 검증
Redux의 상태가 업데이트 되지않아 가장 먼저 Redux 상태 관리 로직을 살펴보았다. Redux의 reducer가 해당 데이터를 업데이트하는 로직이 제대로 동작하는지 확인하였다.
setUserField: (state, action) => {
const { field, value } = action.payload;
console.log('field >>', field);
console.log('value >>', value);
// 'address.'로 시작하는 필드인지 확인
if (field.startsWith('address.')) {
// 구조 분해 할당을 사용하여 addressField 추출
const [, addressField] = field.split('.');
console.log('addressField', addressField);
// 구조 분해 할당을 사용하여 address 필드 업데이트
state.currentUser.address = {
...state.currentUser.address,
[addressField]: value,
};정상적으로 업데이트되는 것을 확인하여 원인이 Redux 로직이 아니라 React Hook Form과의 연동 문제을 파악하였다.
2. Kakao 주소 API 데이터 흐름 분석
Kakao 주소 API에서 반환된 데이터가 Redux 상태에 전달되지 않는 이유를 찾기 위해 데이터 흐름을 추적하였다.
카카오 주소 api에 나와있는 반환값처럼 출력되고있다.
즉, 주소 데이터 자체를 제대로 전달되고 있었다.
3. Redux DevTools로 상태 확인
Redux 상태 자체에는 문제가 없고 React Hook Form과 Redux 상태 간 동기화 문제인것을 알게 되었다.
4. React Hook Form의 데이터 관리 방식 조사
React Hook Form 공식 문서와 검색을 통해 확인한 결과,
- React Hook Form은 기본적으로 입력 필드 값만 내부적으로 관리한다.
- 외부 데이터를 React Hook Form의 필드 값으로 설정하려면
setVaule메서드를 사용해야 한다는 것을 발견하였다.
// useForm 설정
const {
register,
handleSubmit,
watch,
formState: { errors },
reset, // 폼 리셋을 위한 기능 추가
setValue,
} = useForm({
mode: 'onChange',
defaultValues: {
gender: 'default',
},
});
// react-hook-form 상태 업데이트
setValue('address.postcode', data.zonecode);
setValue('address.address', addr);
setValue('address.extraAddress', extraAddr);setValue 속성이 뭐지?
등록된 필드 의 값을 동적으로 설정 하고 폼 상태를 검증하고 업데이트할 수 있는 옵션
해결 후 배운점
1. React Hook Form 과 외부 데이터 연동 방법
React Hook Form에서 외부 데이터를 폼 필드에 반영하려면 setValue 메서드가 필요하다는 점을 배웠다. 사용할 기술이나 라이브러리 등의 문서를 참고하며 개발해야겠다고 생각하였다.
2. 디버깅 도구의 활용
Redux DevTools를 사용해 Redux 상태를 확인하며 문제를 단계적으로 좁혀가는 디버깅의 중요성을 깨달았다.
