[React] Link 페이지 이동 시 스크롤 맨 위로 오게 하기

 

React로 웹을 만들다 발견한 문제가 있었다.

그것은 Link to로 화면 전환을 할 때 Link to가 있는 버튼이 아래에 있으면 화면 전환시에도 그 위치인 아래로 이동하였다.

상단으로 페이지 이동이 되어야 하는데 버튼 누른 위치 그대로 넘어가기 때문에 UX상 좋지 않아 해결이 필요했다.

UX는 사용자 경험의 약자로, 사용자가 어떠한 서비스/ 제품을 직간접적으로 이용하면서 느끼는 종합적인 만족을 의미한다.

---

스크롤 컴포넌트를 만들고 컴포넌트를 index.js에 선언하여 문제를 해결하였다.

index.js의 Router 안에 선언해야 pathname을 인식하므로 Router 안에 선언하였다.

 

ScrollToTop.js 생성

리액트 링크 이동 시 스크롤 맨 위로 오게 하기

 

index.js

리액트 링크 이동 시 스크롤 맨 위로 오게 하기

 

 

이렇게 적용시키면 페이지 이동하여 화면 전환 시 스크롤이 최상단으로 전환 되어 UX상의 문제를 해결할 수 있다.