리액트 프로젝트

• 리액트 프로젝트를 하면서 새롭게 알게 되거나, 오류를 해결해나가는 과정을 기록하는 포스트 입니다.

개발 도구는
1. 리액트
2. 부트스트랩(반응형 구현과 스타일 컴포넌트 이용)
3. xampp(php, mySQL)
4. npm 모듈

이렇게 사용했고
추가되는 부분이 있으면 추후에 수정해나갈 예정!

스크롤바가 맨 위로 올라가게 하기

SPA 방식으로 제작된 웹앱은 새로고침을 하지 않고 페이지 이동을 하기 때문에 페이지를 읽다가 중간에 다른 페이지로 이동했다가, 다시 원래 페이지로 돌아오게 되면 이전에 멈췄던 위치에 그대로 스크롤 위치가 누적되어 있기 때문에 불편한 부분이 있었다.

뷰 프로젝트를 진행할 때도 이런 불편함이 있었는데 리액트 프로젝트를 하면서 이 부분을 해결하는 방법을 또 알아내었다!

useLocation()을 이용해 경로 추적하기

페이지가 바뀔 때마다 스크롤바가 맨 위로 이동해야하기 때문에 useLocation()을 이용하여 경로가 바뀌면 scrollTop 효과를 줄 수 있도록 했다!

scrollTop 컴포넌트 생성하기

모든 페이지에 useLocation과 scrollTop 스크립트 효과를 줄 필요없이 컴포넌트를 생성한 뒤 라우터를 이용하여 루트 컴포넌트(보통은 App.js)에 추가할 수 있도록 했다!