트러블슈팅

[모모] 페이지 변경시 스크롤이 고정되는 문제

2023. 9. 11. 13:26
목차
  1. 문제
  2. 원인
  3. 해결

문제

사진과 같이 게시글 페이지 하단에서

상세 페이지 진입시

스크롤이 아래로 고정되어있음을 발견했습니다.

 

원인

모모는 React 라이브러리를 사용한 SPA입니다. 

SPA란 Single Page Application의 약자로 말 그대로 하나의 페이지를 사용합니다.

 

Ajax 기술을 사용하여 서버로부터 매번 새로운 페이지를 받는것이 아닌,

한 페이지 내에서 필요한 부분만 동적으로 업데이트하여

화면 깜빡임없이 부드러운 화면전환과 데이터 크기를 줄일 수 있습니다.

 

따라서 페이지가 새로 랜더링되더라도

하나의 페이지를 사용하기때문에 스크롤이 고정되어있습니다.

해결

useEffect를 사용하여 컴포넌트가 마운트 될 때

pathname 변경시 스크롤이 브라우저 최상단으로 올라가는 로직을 작성하였습니다.

'lists' 페이지에서는 사용자가 상세 페이지 진입 후 뒤로가기로 다시 진입 할 수 있으니 제외하였습니다.

//App.tsx

export default function App() {
  const location = useLocation();
  const token: string | null = localStorage.getItem(AUTHORIZATION);

  const { pathname } = useLocation();

  useEffect(() => {
    if (pathname !== "/lists") {
      window.scrollTo(0, 0);
    }
  }, [pathname]);
  
  return (
    <>
      <ScrllToTopInstant />
      <GlobalStyle />
	<Header />
      <Router />
      <Footer />
    </>
  );
}

 

'트러블슈팅' 카테고리의 다른 글

[Next.js] Static Site Generation(SSG) 배포하기  (2) 2024.02.16
[Next.js 14] 데이터 업데이트 기능 트러블 슈팅기  (4) 2024.01.29
  1. 문제
  2. 원인
  3. 해결
'트러블슈팅' 카테고리의 다른 글
  • [Next.js] Static Site Generation(SSG) 배포하기
  • [Next.js 14] 데이터 업데이트 기능 트러블 슈팅기
Summer.dev
Summer.dev
프론트엔드 개발자 Summer 입니다! 피드백은 언제나 환영입니다.
Summer.dev
꾸준함이 무기
Summer.dev
전체
오늘
어제
  • 분류 전체보기
    • Projects
      • Next.js board-project
      • MOMO
    • 원티드
    • 우테코 프리코스
    • JavaScript
    • React
    • TypeScript
    • Node.js
    • Algorithm
      • 코플릿
      • 개념정리
    • 네트워크
    • 오류해결
    • 회고
    • 기술면접준비
    • git,github
    • 소소하게 궁금한것
    • Next.js Beta Docs 번역
    • 디자인패턴
    • 트러블슈팅
    • 번역

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 알고리즘
  • 메모이제이션

최근 댓글

최근 글

hELLO · Designed By 정상우.
Summer.dev
[모모] 페이지 변경시 스크롤이 고정되는 문제
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.