1. React-router-dom, React에서 화면 이동을 돕는 라이브러리

🔗react-router-dom 튜토리얼

React에서 화면전환을 하기 위해선 라이브러리를 사용해야 합니다. 바로 React-router-dom 이라는 친구죠. 바로 설치해 봅시다!

npm install [email protected]

<aside> 💡 강의 촬영일 기준의 react-router-dom 버전은 5.2.0입니다. 아래와 같이 버전을 명시해서 설치해주세요

</aside>

먼저 페이지에 쓰일 컴포넌트를 만들어봅시다. pages 폴더를 만들고 그 안에 MainPage.js 와 RegisterPage.js를 만듭니다.

// upload/index.js
function UploadPage(){
    return <h1>상품 업로드 페이지</h1>
}

export default UploadPage;

// product/index.js
function ProductPage(){
    return <h1>상품 상세 페이지</h1>
}

export default ProductPage;

App.js 파일이 react 프로젝트가 렌더링될 때 처음에 들어가게 되는 화면입니다. 그래서 그 안에 각각의 페이지가 들어갈 수 있도록 BrowserRouter, Route, Switch 컴포넌트를 이용합니다.

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
**import { BrowserRouter as Router } from 'react-router-dom';**

ReactDOM.render(
    <React.StrictMode>
        **<Router>**
            <App />
*        **</Router>**
    </React.StrictMode>,
    document.getElementById('root')*
);

// 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();

Route 컴포넌트 안에 path에 접근했을 때 보여줄 component를 넣어줍니다.

//App.js
import "./App.css";
import MainPageComponent from "./main";
import UploadComponent from "./upload";
import ProductComponent from "./product";
import {Route, Switch } from "react-router-dom";

function App() {
  return <MainPageComponent />;
}

export default App;

npm start

4. 코드를 실행하고 브라우저의 url을 바꿔보면 각각 다른 화면이 보이는 것을 확인할 수 있습니다.

Link 컴포넌트 이용하기

버튼을 클릭해서 다른 페이지로 넘어가는 경우는 어떻게 구현해야 할까요? Link 컴포넌트를 사용하면 손쉽게 구현할 수 있습니다. 클릭 대상이 될 컴포넌트 위에 Link 컴포넌트를 씌우면(Wrap) 하면 됩니다.