React 활용 - 1 : React-router-dom 페이지 네이게이션 만들기

리액트에서 페이지 이동을 하기 위해서는 router를 활용해야한다. 

 

rounter를 사용하기 위해서는 npm 으로 react-router-dom 를 먼저 설치해준다 

 

npm i react-router-dom

 

그 후 이동할 화면을 먼저 생성한다.

처음 만드는 페이지로, FirstScreen.js를 생성한다.

import React from 'react';

function FirstScreen() {

    return (
        <div>
            first
        </div>
    );
  }
export default FirstScreen;

 

이제 App.js를 열어 아래와 같이 수정한다.

 

import React from 'react';
import FirstScreen from './Screens/FirstScreen'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from 'react-router-dom';

function App() {
  return (
    <Router>
          {/* 실제 화면에 보여지는 태그, 클릭 시 주소창이 /FirstScreen으로 이동 */}
          <Link to="/FirstScreen">FirstScreen</Link>
          {/* 주소창 변함에 따라 화면을 해당 주소창에 맞게 변경해준다. */}
          <Routes>
            <Route path="/FirstScreen"  element={<FirstScreen />}></Route>
          </Routes>
    </Router>
  );
}


export default App;

 

Routes는 주소창 변함에 따라 해당 주소창의 화면을 Route의 path와 매칭해 찾아 element의 화면을 열어준다.

 

React 6버전에 사용하던 Switch는 더이상 사용되지 않고 위와 같은 방식으로 Router가 사용된다.

 

클릭시 first 주소창이 변경되며 화면이 불러와진다.

 

불러와진다보다는 렌더링된다는 표현이 맞다.

 

그래서 위 주소창은 변함이 없고 변경되는 부분인 Route부분에만 화면이 렌더링되어 변경된다.

 

 

코드 바로가기 

GitHub - sonhoil/reactBootTemplate