웹 개발에서 살아남기

React Hook Form에서 formState의 값이 업데이트되지 않거나 isDirty가 항상 false로 나오는 문제는 RHF의 성능 최적화 핵심인 Proxy 기반 Lazy Evaluation(지연 평가) 때문이다. 이 현상의 기술적 원리와 올바른 구독(Subscribe) 방법을 정리한다. React Hook Form: formState 업데이트가 안 되는 이유 (Lazy Evaluation)React Hook Form(이하 RHF)으로 폼을 개발하다 보면 황당한 경험을 할 때가 있다. form.formState.isDirty 값을 체크해서 수정 사항이 없으면 제출을 막으려고 로직을 짰는데, 폼을 아무리 수정해도 여전히 false로 나와서 기능이 동작하지 않는 현상이다.더 기묘한 건, 디버깅을 위해..

백엔드 데이터에 이미 id 속성이 있을 때 useFieldArray를 사용하면 React Hook Form(RHF)의 내부 식별자와 충돌하여 데이터가 덮어씌워지거나 키 에러가 발생할 수 있다. 이를 해결하기 위한 keyName 옵션 설정법과, 자식 컴포넌트로 내릴 때의 정확한 타입 정의(FieldArrayWithId) 방법을 정리한다. React Hook Form: useFieldArray의 id 충돌 해결 (keyName 설정)useFieldArray를 사용하여 동적 폼을 만들 때, 서버에서 받아온 초기 데이터(Default Values)에 id라는 필드가 포함되어 있으면 곤란한 상황이 발생한다.React Hook Form(이하 RHF)은 배열 아이템을 추적하기 위해 자체적으로 id라는 고유 키를 생성..

useFieldArray는 동적 폼 관리를 위해 append, remove, move 등 8가지 핵심 메서드를 제공한다. 각 함수의 정확한 동작 원리와 인자(Argument), 그리고 실무에서 어떤 상황에 사용해야 하는지 상세히 정리한다. React Hook Form: useFieldArray의 모든 함수 완벽 정리useFieldArray를 단순히 배열을 map으로 돌리는 용도로만 쓰고 있지는 않은가? 이 훅은 배열 데이터를 효율적으로 조작하기 위해 최적화된 다양한 메서드를 제공한다. 단순 추가/삭제 외에도 순서 변경이나 특정 위치 삽입 등 복잡한 UI도 메서드 하나로 해결할 수 있다.리턴 객체에 포함된 모든 함수(API)의 사용법과 특징을 하나씩 상세히 분석해 본다.1. 데이터 추가 계열 (append..

React Hook Form을 사용하는데 입력 반응 속도가 느리다면 watch의 오남용을 의심해야 한다. 폼의 상태를 구독하여 리렌더링을 유발하는 watch와 값을 조용히 가져오는 getValues의 차이점, 그리고 useWatch를 이용한 렌더링 범위 최적화 전략까지 정리한다. React Hook Form 성능 최적화: watch vs getValues, 그리고 useWatchReact Hook Form(이하 RHF)이 다른 라이브러리보다 빠른 이유는 비제어 컴포넌트(Uncontrolled Component) 방식을 사용하여 입력값이 바뀔 때마다 리렌더링을 하지 않기 때문이다.하지만 개발자가 편의상 watch 함수를 무분별하게 사용하면, RHF의 장점인 'No Re-render' 특성이 사라지고 use..

서버에서 받아온 데이터를 defaultValues에 넣었는데 폼이 비어있는 현상은 useForm의 초기화 시점과 데이터 로딩 시점이 맞지 않아서 발생한다. 이를 해결하는 두 가지 핵심 전략인 reset() 활용과 조건부 렌더링 방법을 상세히 정리한다. React Hook Form: defaultValues가 비동기 데이터로 초기화되지 않을 때 해결법React Hook Form(이하 RHF)을 사용하다 보면 가장 흔하게 겪는 문제가 있다. API로 사용자 정보를 받아와서 수정 페이지를 만들려는데, 분명 데이터를 defaultValues에 넣었음에도 불구하고 input 창이 텅 비어있거나 초기값(빈 문자열)만 보이는 현상이다.이것은 RHF의 useForm이 컴포넌트의 첫 렌더링 시점에 딱 한 번만 초기화되기..