sessionstorage 썸네일형 리스트형 React에서 스크롤 위치 저장 및 복원 기능 구현하기 리스트·기사·문서 페이지에서 뒤로가기나 라우팅 후 원래 읽던 위치로 돌아가게 하는 스크롤 저장/복원은 UX 품질을 결정짓는 요소입니다. 실무에서는 라우터, 이미지 로딩, 컨테이너 스크롤 등 다양한 변수 때문에 일관된 동작을 만들기가 쉽지 않습니다. 이 글에서는 React에서 신뢰성 있게 스크롤 위치를 저장하고 복원하는 방법을 단계별로 정리합니다.1. 핵심 아이디어원리는 단순합니다. 스크롤 이벤트로 현재 위치를 저장하고, 화면 진입 시 저장된 위치로 스크롤합니다. 브라우저 기본 복원과 충돌하지 않도록 manual 모드로 바꾸고, 레이아웃/이미지 로딩 후 복원 타이밍을 조절합니다.// 브라우저 기본 복원 끄기 (충돌 방지)useEffect(() => { try { window.history.scrollRe.. 더보기 React 앱에서 브라우저 저장소(Local Storage와 Session Storage) 활용하기 브라우저 저장소는 서버 왕복 없이 사용자 상태를 유지하고 UX를 개선하는 데 유용합니다. React에서는 Local Storage와 Session Storage를 적절히 선택해 퍼시스턴스와 탭 범위를 관리합니다. 실무에서 바로 쓸 수 있는 패턴과 커스텀 훅을 소개합니다.1. Local vs Session 핵심 차이Local Storage는 브라우저를 닫아도 남는 영구 저장소이며, 동일 도메인의 모든 탭에서 공유됩니다. Session Storage는 탭마다 분리되고 탭을 닫으면 삭제됩니다. 용량은 브라우저별로 대략 5~10MB이며 문자열만 저장 가능합니다. 민감한 데이터는 저장하지 않습니다.2. React에서 안전하게 읽기/쓰기SSR 환경(Next.js 등)에서는 렌더 중 window가 없을 수 있습니다... 더보기 이전 1 다음