Stackflow의 스크롤 위치 보존 동작 원리

Apr 23, 2026 updated Apr 23, 2026 react stackflow ux

Stackflow는 Activity 간 전환 시 자동으로 스크롤 위치를 보존합니다. 이는 Stackflow의 내부 구현과 React의 가상 DOM 관리 방식이 결합되어 동작하는 것입니다.

Activity Stack 구조

Stackflow는 Activity들을 스택 구조로 관리합니다:

[PostList] → push(PostDetail) → [PostList, PostDetail] → pop() → [PostList]

이때 중요한 점은PostList Activity가 DOM에서 완전히 제거되지 않는다는 것입니다.

DOM 유지 방식

Activity가 push될 때:

새로운 Activity는 현재 Activity 위에 쌓임

이전 Activity는 DOM에서 제거되지 않고 숨겨짐 (display: none)

이전 Activity의 상태와 DOM 구조가 그대로 보존됨

Activity가 pop될 때:

최상위 Activity가 제거됨

이전 Activity가 다시 표시됨 (display: block)

이전 Activity의 DOM 상태가 그대로 복원됨

스크롤 위치 보존 원리

DOM 요소 보존

Activity의 DOM 요소가 제거되지 않고 유지되므로

스크롤 위치를 포함한 모든 DOM 상태가 자동으로 보존됨

React 가상 DOM

React는 컴포넌트가 리렌더링되어도 실제 DOM을 최소한으로 업데이트

Activity가 숨겨졌다가 다시 표시될 때 불필요한 DOM 조작을 하지 않음

브라우저 동작

브라우저는 display: none 상태의 요소도 스크롤 위치를 기억

Activity가 다시 표시될 때 브라우저가 자동으로 스크롤 위치를 복원

장점

자동화된 상태 관리

개발자가 별도로 스크롤 위치를 관리할 필요가 없음

Activity 전환 시 자연스러운 UX 제공

성능 최적화

DOM 요소를 재사용하므로 불필요한 재생성 비용이 없음

메모리 사용이 효율적

사용자 경험

네이티브 앱과 유사한 자연스러운 전환 경험

사용자의 컨텍스트가 유지되어 사용성 향상

주의사항

메모리 관리

Activity 스택이 깊어질수록 메모리 사용량이 증가할 수 있음Stackflow 성능 상의 잠재적 문제