[React] React-router-dom 리액트 라우터

리액트는 SPA(Single Page Application)방식으로,

페이지를 새로고침하지 않고 변경된 부분만 자바스크립트를 통해 업데이트하는 방식이다

 

리액트에서 외부 라이브러리를 사용하여 SPA 페이지를 구현하는 방법에는 여러가지가 있다

그 중에서 React-router-dom을 사용해서 라우팅을 구현해보자

 

여기서는 빠른 페이지 구현을 위해, CRA으로 만든 리액트앱에서 프로젝트를 진행해보겠다

 

1. react-router-dom 설치

npx create-react-app router-tutorial 또는 npm create-react-app router-tutorial 

을 통해 리액트앱을 생성해준다

(나는 지난번에 만들어둔 my-app을 사용했다)

 

다음으로 명령프롬프트에서 해당 디렉토리로 이동한다

cd my-app

해당 디렉토리에서 npm install react-router-dom 을 실행시켜 라이브러리를 설치한다

 

2. URL 연결

설치가 끝나면 코드 편집기로 CRA를 통해 생성한 프로젝트를 열어준다

아래와 같이 파일들이 생성되어있다

그 중, index.js 파일을 수정해준다

(index.js 파일에서 index.html파일의 div요소를 root아이디로 가져와서 <App>컴포넌트를 렌더링해 보여준다)

 

index.js 파일에서 react-router-dom의 Browser Router를 임포트하고,

렌더링부분에서 <App /> 컴포넌트를 <BrowserRouter></BrowserRouter>로 감싸준다

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom'; //이부분 추가

ReactDOM.render(
  <BrowserRouter> 
    <App />
  </BrowserRouter>, //추가
  document.getElementById('root')
);


reportWebVitals();

 

3. 페이지 만들기

src 경로에 페이지 두 개를 만들어준다

src/page1.js

// page1.js
import React from 'react';

const Page1 = ()=>{
    return (
        <div>
            <h1>Page 1</h1>
        </div>
    );
};

export default Page1;

src/page2.js

// page2.js
import React from 'react';

const Page2 = ()=>{
    return (
        <div>
            <h1>Page 2</h1>
        </div>
    );
};

export default Page2;

 

4. 링크 연결하기

src경로의 App.js를 수정한다

src/App.js에서 page1과 page2의 링크를 연결해준다

// App.js
import {Link} from 'react-router-dom';

const App = () => {
  return(
    <div>
      <Link to='/page1'>Page1</Link>
      <Link to='/page2'>Page2</Link>
    </div>
  )
}

export default App;

 

여기까지 하고 npm start를 통해 localhost:3000에 접속한 뒤, 링크를 클릭하면

아래와 같이 url이 변경된다

그러나 페이지는 바뀌지 않는다

 

5. 라우트 구현하기

마지막으로 페이지 변경을 위한 라우팅을 해주자

다시 index.js 파일을 수정해주자

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Routes, Route} from 'react-router-dom'; 

import App from './App'; 
import Page1 from './page1';
import Page2 from './page2';

ReactDOM.render(
  <BrowserRouter> 
    <Routes>
      <Route path = "/" element={<App />} />
      <Route path = "/page1" element={<Page1 />} />
      <Route path = "/page2" element={<Page2 />} />
    </Routes>
  </BrowserRouter>, 
  document.getElementById('root')
);

먼저 react-router-dom 라이브러리에서 BrowserRouter, Routes, Route를 임포트하고,

App, Page1, Page2를 불러온다

 

다음으로

기본경로"/"에는 <App>을, "/page1"에는 <Page1>, "/page2"에는 <Page2> 컴포넌트를 렌더링해줬다

 

 

여기까지 하고, localhost:3000으로 들어가주면 아래와 같이 url에 따라 페이지를 렌더링해준다