[32] 리액트 라우터 v6

현재 진행하고있는 프로젝트 에 라우트 적용해보기

현재 redux 를 사용하고있는 todo 프로젝트에 라우터를 적용하여

todo를 클릭했을때 ? 상세 페이지를 띄우게 만들어보자.

이과정을 하게되면서 문제를 해결하는 과정도 기록해보자.

1. 프로젝트에 라우터 라이브러리 설치

$ npm install react-router-dom

2. 프로젝트 라우터 적용

루트 디렉토리에 index.js 파일에 react-router-dom 내장 컴포넌트 BrowerRouter 컴포넌트를 사용하여 감싸준다.

이 컴포넌트는 간단하게 HTML5 의 History API 를 사용해 주소경로에 관련된 정보를 리액트 컴포넌트에서 사용할수있도록 해준게하는 컴포넌트 이다.

사용해보면서 이해해보자

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { legacy_createStore as createStore } from "redux";
import rootReducer from "./redux/modules";
import { Provider } from "react-redux";
import { composeWithDevTools } from "redux-devtools-extension";
import { BrowserRouter } from "react-router-dom";

// 스토어 생성
// composeWithDevTools 를 사용하여 리덕스 개발자 도구 활성화
const store = createStore(rootReducer, composeWithDevTools());

// createStore 취소선이 그어지는 이유
// https://velog.io/@xmun74/Q-createStore-%EC%B7%A8%EC%86%8C%EC%84%A0-%EC%99%9C-%EA%B7%B8%EC%96%B4%EC%A7%80%EB%82%98
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </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();

3. 페이지 컴포넌트 생성

리액트 라우터를 통해서 연결된 페이지 생성하기이다.

필자는 현재 컴포넌트들을 미리 만들어놓은상태이기에 패스한다.

4. Route 컴포넌트로 특정경로에 원하는 컴포넌트 보여주기

<Routes> 컴포넌트 로 감싸줘도되고 안써도되지만 라우트 를 구분짓기위해 써준다.

<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} /> 양식을 갖는 컴포넌트를 사용해서 라우트 설정할수있다.

현재 나의 프로젝트에서는 app.js 에서 <CreateTodoContainer /> <TodosContainer /> 두개를 사용중이였다 . 이를 pages/Home.js 에서 묶고 그 Home.js 컴포넌트를 route 설정하였다.

app.js

**import { Route, Routes } from "react-router-dom";**
import { Home } from "./pages/Home";

function App() {
  return (
    <>
      **<Routes>
        <Route path="/" element={<Home />} />
      </Routes>**
    </>
  );
}

export default App;

5. Link 컴포넌트를통해 다른페이지 이동

웹페이지에서는 보통 a 태그를 사용한다 . 다만 리액트 라우터를 사용하는 프로젝트에서는 바로 사용하면안된다.

a 태그를 통해 클릭하게되면 페이지 를 이동할때 브라우저에서는 페이지를 새로 불러오기때문이다.

Link 컴포넌트 또한 a 태그를 사용하긴 하지만 페이지를 새로 불러오는 것을 막고 History API 를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되있다.

Link 컴포넌트사용방법이다.

<Link to="경로">링크 이름</Link>