[React]: router 화면 전환 시 스크롤 새로고침

router와 Link를 통해서 화면을 전환할 때 이전에 내린 스크롤이 그대로 유지되는 문제점이 있었다. 이러한 문제점을 해결하기 위해 useLocation과 window.scrollTo를 사용해서 화면을 전환할 때마다 스크롤이 초기화 되면서 맨 위의 화면을 나타나게 코드를 수정했다. 

 

모든 routes는 App.js에서 구동되기 때문에 스크롤 새로고침 코드도 App.js에 작성해야 한다. 

 

<App.js>

import './App.css';
import Main from './components/Main';
import { BrowserRouter as Router, Routes, Route, useLocation} from 'react-router-dom';
import ProjectPage from './components/ProjectPage';
import Navbar from './components/Navbar';
import AboutPage from './components/AboutPage';
import StudyPage from './components/StudyPage';
import Footer from './components/Footer';
import { useEffect } from 'react';


export  function Scroll(){
  const {page}=useLocation();
  useEffect(()=>{
    window.scrollTo(0,0)
  },[page]) //page가 바뀔 때 마다 적용되게 한다.
  return null;
}

const App=()=> {

  return (
      <div className="App">
          <Navbar/>
          <div className="App-header">
          <Routes>
            <Route path='/' element={<Main/>}/>
            <Route path='/about' element={<AboutPage/>}/>
            <Route path='/study' element={<StudyPage/>}/>
            <Route path='/project' element={<ProjectPage/>}/>
          </Routes>
          </div>
          <Footer/>
    </div>

  );
}

export default App;

 

그리고 함수를 index.js에 적용하면 된다.

 

<index.js>

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App, { Scroll } from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
  <React.StrictMode>
    <Scroll/>
    <App />
  </React.StrictMode>
  </BrowserRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

주의할 점은 App을 Scroll 컴포넌트로 감싸는게 아니라 App 위에 추가해줘야 한다.