react 썸네일형 리스트형 레거시 코드를 React Query로 개선한 리팩토링 이야기 이커머스 플랫폼의 결제 시스템을 유지보수하면서 React Query를 도입하여 코드 품질과 성능을 개선한 경험을 공유하려고 합니다. 기존 코드의 문제점 발견프로젝트에 투입되어 코드를 분석하던 중, 데이터 패칭 로직이 대부분 useEffect로 구현되어 있는 것을 발견했습니다.// 기존 코드const [memberAddress, setMemberAddress] = useState(null);const [isLoading, setIsLoading] = useState(true);useEffect(() => { if (!router.isReady) return; fetchMemberAddress(); createOrderProducts();}, [router, router.isReady]);const f.. 더보기 React-hook-form value 값 설정 문제상황React-Hook-Form을 사용하면서 api로 조회해온 값을 value에 세팅을 해주고 싶었다.그래서 Input 안에 field.value(직접 값을 control함) 과 내가 조회해온 값을 value로 써주었다.조회는 잘되었으나, 조회된 값이 'apple'일 경우, 모든 문자를 삭제하여 'a'만 남았을 때 한 번 더 삭제하면 'apple'로 되돌아가는 문제가 있었습니다. input-text.tsx (공통 Input)interface Props { name: string; title: string; type?: string; value?: any; maxLength?: number; loading?: boolean value: string;}export const InputText.. 더보기 이전 1 다음
