피드로 돌아가기
Dev.toFrontend
원문 읽기
localStorage 기반 폼 저장의 5대 엣지 케이스 해결을 통한 데이터 무결성 확보
Form drafts that survive a closed tab — and the 5 bugs everyone ships first
AI 요약
Context
사용자 경험 개선을 위해 React 폼 데이터를 localStorage에 자동 저장하는 기능을 구현함. 단순한 useEffect 기반 저장 로직은 StrictMode의 이중 렌더링, 초기 상태의 덮어쓰기, 빈번한 I/O 발생 등 예상치 못한 런타임 오류를 유발함.
Technical Solution
- JSON.stringify 결과값을 useRef에 캐싱하여 이전 상태와 비교하는 Content Hash 기반의 조건부 쓰기 로직 도입
- 초기 렌더링 시 빈 상태가 기존 드래프트를 덮어쓰지 않도록 초기 직렬화 값으로 Seed 설정
- window.localStorage 접근 및 setItem 호출 전체를 try-catch로 감싸 Storage Quota 초과나 보안 정책에 의한 Crash 방지
- SCHEMA_VERSION 필드를 도입하여 데이터 스키마 변경 시 구버전 데이터를 자동 폐기하는 Versioning 전략 적용
- JSON.parse 실패 및 하이드레이션 오류 발생 시 해당 레코드를 즉시 삭제하는 자가 치유(Self-healing) 메커니즘 구축
실천 포인트
- localStorage 접근 전 window 객체 참조 단계부터 try-catch 적용 여부 확인 - 단순 상태 변경이 아닌 직렬화된 값의 실제 차이를 비교하여 불필요한 Storage Write 최소화 - 클라이언트 사이드 캐시 데이터에 버전 번호를 부여하여 런타임 스키마 불일치 방지 - React 18 StrictMode 환경에서 Side-effect가 중복 실행될 때의 데이터 정합성 검증