Blog

문제를 느낀 지점#

게시글 목록 페이지에서
필터와 정렬 상태를 useState로 관리했다.

페이지 내부에서는 문제가 없었지만,
새로고침이나 페이지 이동 이후 다시 돌아오면
설정했던 필터가 모두 초기화됐다.

특히
목록 → 상세 → 목록
이 흐름에서 매번 상태가 풀리면서,
사용자의 탐색 맥락이 유지되지 않는 문제가 반복됐다.

브라우저의 뒤로가기에서도
같은 현상이 발생했다.

URL은 이전 페이지로 돌아왔지만,
화면에 보이는 상태는 초기 상태였다.

이때부터
페이지는 정상적으로 이동했지만
UI는 과거 상태를 기억하지 못한다는 어색함이 느껴졌다.

원인#

문제의 원인은 단순했다.

useState로 관리한 상태는
컴포넌트의 생명주기에 종속된다.

페이지 이동이나 새로고침이 발생하면
컴포넌트는 다시 마운트되고,
상태 역시 초기값으로 재생성된다.

또 하나의 원인은
이 상태들이 URL이나 브라우저 히스토리와 전혀 연결돼 있지 않았다는 점이다.

즉,

• 브라우저는 이전 페이지로 돌아왔지만
• React는 처음 보는 화면처럼 렌더링했다

이 불일치가
"동작은 맞지만 경험은 어색한" 화면을 만들고 있었다.

해결 방향#

이후부터는
상태의 성격에 따라 관리 위치를 분리하기 시작했다.

쿼리 스트링#

필터, 정렬처럼
목록의 조건을 결정하는 상태는
URL에 포함시키는 방식으로 옮겼다.

• 새로고침 이후에도 상태 유지
• 뒤로가기와 자연스럽게 동기화
• 링크 공유 시 동일한 화면 재현 가능

이 상태들은
페이지 내부 상태라기보다
페이지의 조건에 가까웠다.

로컬 / 세션 스토리지#

일시적으로 유지되면 되는 상태는
브라우저 스토리지를 활용했다.

• 세션 동안만 유지되면 되는 경우
• URL에 노출할 필요는 없는 경우

이 방식은
사용자 경험을 유지하면서도
구조를 크게 바꾸지 않는 선택이었다.

정리#

모든 상태를 useState로 관리하는 것은
간단하지만, 항상 적절하지는 않다.

상태의 위치와 생명주기를 결정하는 것이
문제를 줄이는 첫 단계였다.