[React] react-router-dom

 

 

git 수업이 지나고 다시 돌아온 리액트 관련 수업...

잘 기록하고, 나중에 까먹을 때 다시 와야지 ㅠ

 

 

---

 

1. react-touter-dom?

리액트에서 화면 전환을 하기 위한 라이브러리이다.

 

 

---

 

2. react-touter-dom 설치

 

[설치]

npm install react-router-dom@5.2.0

옛날 강의들은 대부분 5버전을 쓴다. 최신버전은 안되는 기능들이 있기 때문에 혼란을 막고자 해당 버전을 쓴다.

나는 성격이 급해서 바로 깔아가지고, 최신버전을 설치했었는데, 그럴 경우는 지우고 다시 깔면 된다.

 

 

[삭제]

npm uninstall router-react-dom

 

5.2버전 설치완료된 모습이다. packge.json에서 확인할 수 있다.

 

 

---

 

3. react-touter-dom > BrowserRouter 불러오기

 

[index.js]

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

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

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

index.js는 리액트가 처음 시작될 때 가장 먼저 시작한다. import를 이용해 라이브러리, 모듈을 다운받을 수 있기 때문에 import를 통해 브라우저 라우터를 불러오고, App을 감싸준다. 부모 컴포넌트가 되는 것이다.

 

App은 자식 컴포넌트로서 자유롭게 페이지 이동이 가능해진다.

 

실행을 해보면, hihi라는 아직 없는 경로를 검색해도, 똑같은 메인페이지가 나오는 것을 확인할 수 있다.

 

---

 

4. react-touter-dom 적용하기

 

[App.js]

import './App.css';
//index.js 생략 가능 
import MainPageCompnent from "./main/index.js"
import {Switch, Route} from 'react-router-dom';
function App() {
  return (
    <div>
      <Switch>
        <Route path={"/"}>
          <MainPageCompnent></MainPageCompnent>
        </Route>
      </Switch>
    </div>
    
    );
}

export default App;

리액트 라우터 돔을 app.js에서도 import 해준다. 그 중 Switch와 Route를 가져온다.

App() 함수의 리턴 값으로 1개만 출력할 수 있기 때문에 <div>로 감싸주고, 경로 변화가 필요한 부분에 <Switch> 태그로 감싸준다. Route 태그로 path 경로를 정해준다.

 

이 때 참고로 말하자면, <MainPageComponent>는 위에 import에서도 볼 수 있듯이 main/index.js 경로에 우리가 만들어준 메인페이지를 담고 있다.

 

 

새로운 페이지를 2개 더 만들어 보겠다. 상품관리 관련 페이지를 관리하는 product 폴더 아래 index.js 파일을 만들었고, 업로드 관리 관련 페이지를 관리하는 upload 폴더 아래 index.js 파일을 만들었다.

 

[App.js]

import './App.css';
//index.js 생략 가능 
import MainPageCompnent from "./main/index.js"
import {Switch, Route} from 'react-router-dom';
import UploadPage from './upload';
import ProductPage from './product';

function App() {
  return (
    <div>
      <Switch>
        <Route exact={true} path={"/"}>
          <MainPageCompnent></MainPageCompnent>
        </Route>
      </Switch>

      <Switch>
        <Route exact={true} path={"/product"}>
          <ProductPage></ProductPage>
        </Route>
      </Switch>

      <Switch>
        <Route exact={true} path={"/upload"}>
          <UploadPage></UploadPage>
        </Route>
      </Switch>
    </div>
    
    );
    
}

export default App;

그리고 새롭게 만든 2개의 파일을 import해주고, 따로 경로를 만들어 주었다. 해당 경로로 갔을 때 보일 페이지를 <함수></함수>로 표시해준다.

 

 

그러면 이렇게 페이지별로 주소가 맵핑되는 것을 확인할 수 있다.

 

 

 

출처 : 

https://www.inflearn.com/course/%EC%98%AC%EC%9D%B8%EC%9B%90-%EA%B0%9C%EB%B0%9C%ED%81%B4%EB%9E%98%EC%8A%A4

비전공자를 위한 진짜 입문 올인원 개발 부트캠프 - 인프런 | 강의