react router 설정하기

vue로 프로젝트를 진행할 당시에는 프로젝트를 처음부터 설계한 적이 많아 라우터 뼈대도 직접 잡았는데, 문득 react에서는 한 번도 경험한 적이 없다는 생각이 들었다. 물론 이론적으로는 알고 있지만 직접 해보는 게 더 바르게 또 빠르게 이해할 수 있을 거라는 생각에 마침 클론 프로젝트로 진행할 겸 라우터 테스트를 해보았다.

---

리액트는 뷰와는 다르게 라우터를 사용하기 위해서는 따로 라이브러리 설치가 필요하다.

npm i react-router-dom

https://www.npmjs.com/package/react-router-dom

react-router-dom

 

참고사항으로 상단 라이브러리는 삼형제(?)인데,

• react-router-dom
• react-router-native
• react-router

이 각각

• web(dom)
• native(app)
• router(web+app)

에서 사용된다. 하여 각자의 프로젝트에 맞는 라이브러리를 설치하여 사용하자.

---

설치가 완료되었다면 가장 먼저 엔트리 포인트에 라우터를 인식시켜주는 코드가 필요한데, CRA 기준으로는 src/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')
);

import { BrowserRouter } from 'react-router-dom'; 로 라이브러리를 불러와서 <App />을 감싸주는 코드를 작성하면 된다. 참고로 BrowserRouter을 포함하여

• BrowserRouter
• HashRouter
• MemoryRouter
• NativeRouter
• StaticRouter

이 있으며, 기회가 된다면 더 심화적인 포스팅으로 다루어 볼 예정이다.

이번에 사용하는 BrowserRouter는 HTML5에 내장되어있는 History API를 통하여 UI를 업데이트 하는 방식으로 페이지가 깜박거리지 않고 이동이 가능하여 동적인 페이지에 많이 사용된다.

참고사항으로 CRA로 설치했을 때, <App /> 컴포넌트를 감싸고 있는 React.StrictMode는 애플리케이션 내의 잠재적인 문제들, 예를 들어 권장되지 않는 DOM NODE 사용 혹은 레거시 context API 등, 을 알아내어 경고해주기 위한 도구이며, 개발 모드에서만 활성화되는 기능이다. (즉, 프로젝트 빌드 시에는 비활성화된다.)

---

다음은 라우터로 이동할 각각이 페이지를 만드는데, 나는 예시로 HOME와 FOR YOU를 만들었다. 이 부분은 각자의 프로젝트에 맞게 구조를 구성하면 될 것 같다.

---

이제 보여줄 컴포넌트와 라우터 주소를 서로 매칭 해주어야 한다. 처음에 index.js에서 App 컴포넌트를 BrowserRouter로 감싸주었으니 이제는 App.js에 들어가서 라우터와 컴포넌트를 정의하면 된다.

import './App.css';
import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home/Home'
import ForYou from './pages/ForYou/ForYou'


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

export default App;

react-router-dom에서 Route, Routes와 라우터로 보여주는 페이지가 될 컴포넌트들을 import 시켜준다. 또한 Route들은 <Routes></Routes>로 감싸서 사용해야 한다.

<Route path="/" element={<Home />} />
<Route path="/foryou" element={<ForYou />} />

<Route path="/원하는 주소" element={<보여주고 싶은 컴포넌트 />} />

path에 설정된 부분은 도메인 + '/path에 설정한 단어'로 이동 주소가 될 것이고, 해당 주소로 이동했을 때, element로 설정한 컴포넌트를 보여주게 된다.

---

여기까지 설정했다면 이제 다 끝나고 마지막 한 관문이 남은 상태인데, 바로 서로의 페이지를 이동하는 방법이다. 페이지 이동 방법은 'react-router-dom'로 import 한 Link 컴포넌트를 이용하여 이동할 수 있는데, 상단에서 만든 Home과 FOR YOU가 서로 이동할 수 있도록 테스트를 진행하였다.

Home.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      <Link to="/foryou">FOR YOU</Link>
    </div>
  );
};

export default Home;

ForYou.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const ForYou = () => {
  return (
    <div>
      For You
      <Link to="/">Home</Link>
    </div>
  );
};

export default ForYou;

---

여기까지 설정을 완료하고 확인하여 본다면

path를 /로 설정한 Home.jsx에서는 For you 페이지로 이동할 수 있는 링크가 떠있고, 해당 링크를 클릭하면

주소가 변경되고 ForYou.jsx에서 작성한 코드로 페이지가 변경된 것을 확인할 수 있다. Home를 누르면 상단의 캡처 화면 페이지로 다시 이동하게 된다.

---

이렇게 간단하게 라우팅 설정을 마쳤다. 설명한 방법은 리액트 라우터를 익히기 위한 간단한 개념이고, 사실 실무의 큰 프로젝트들에서는 해당 방식을 잘 사용하지 않는다. 상단과 같은 방식은 모든 컴포넌트를 다 불러오기 때문인데, 예를테면 HOME 컴포넌트를 불러오는 페이지를 보고 있음에도 FOR YOU 컴포넌트까지 함께 불러오기 때문이다.

큰 프로젝트라고 하면 설정해야 할 라우터도 많을 것이고, 그에 따라 서로 유기적으로 연결된 스크립트 파일도 많게 된다. 특정 페이지를 볼 때마다 해당 페이지에서 사용하게 되는 컴포넌트 외의 다른 컴포넌트까지 모두 불러오는 문제가 발생하기 때문에 어느 정도 규모가 있는 프로젝트에서는 지양되는 방법이다.

그렇다고 하여 개념을 아예 익힐 필요가 없는 것은 아니라고 생각한다.