[ React 기초 ] Router 알아보기

Router를 알아보기 전에 SPA는 뭐였나요 ?

SPA는 경로에 따라 다른 뷰를 보여줄 수 있습니다. 
SPA는 하나의 페이지만 가지고 있지만 한 종류의 화면만 사용하지 않습니다.

그래서 경로에 따라서 다른 뷰를 보여주는 라우팅의 과정이 필요합니다.

이 때 사용하는 것이 Router 입니다.

 

SPA에 대해 자세히 알고 싶다면 클릭하세오

[ React 기초 ] React SPA 알아보기

 

아무튼, 이제부터 Router 사용에 대해 자세히 알아봅시다.

지금 부터 알려드리는 방식은 비주얼 스튜디오 터미널, 맥북을 이용하여 작성되었습니다.

 

개발 환경 구축

 

1. 우선 폴더를 하나 생성 합니다.

 

2. 비주얼 스튜디오 터미널에 프로젝트를 시작합니다.

ex) npx create-react-app 프로젝트를 시작할 이름을 적습니다.

저는 이렇게 코드를 작성하였습니다.
npx create-react-app easy

create-react-app은 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인입니다.

 

test 폴더 안에는 툴 체인이 생깁니다.

프로젝트 시작 이름을 가진 툴 체인이 생긴 모습을 볼 수 있습니다.

easy 툴 체인을 열어보면 프로젝트 시작에 필요한 여러가지 파일들을 볼 수 있습니다.

 

 

 

3. 라우터를 사용하려면 터미널에서 React Router(react-router-dom) 라이브러리를 설치해야 합니다.

여기서 주의할 점은 easy폴더에서 터미널을 실행해야 npm run start 를 통해 본인이 개발한 환경을 브라우저로 볼 수 있습니다.

버전은 사용자 설정에 맞게 사용하시면 됩니다.
npm install react-router-dom@^6.3.0

 

 

4. React Router 라이브 러리가 제공하는 컴포넌트 사용하기 위한 세팅을 해야합니다.

본인이 사용 할 파일에서 import를 하여 사용할 컴포넌트를 가져옵니다.

import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

 

여기까지 하면 개발 환경 구축은 완료 되었습니다.

 

지금 부터는 BrowserRouter, Routes, Route, Link  컴포넌트에 대해 알아봅시다. 

 

BrowserRouter

• BrowserRouter 컴포넌트는 웹 애들리케이션에서 HTML5의 History API를 사용하여 페이지를 새로고침 하지 않아도주소를 변경할 수 있게 해줍니다.
• BrowserRouter 컴포넌트가 제일 상위에 있어야 React Router 컴포넌트들을 사용할 수 있습니다.

아래 코드를 참고 하세요.

const App = () => {
  return (
  <BrowserRouter> // 상위에 작성되어 있는 코드
    <div>
        <div className='App'>
          <main>
            <Sidebar />
            <section className='features'>
            </section>
          </main>
        </div>
    </div>
   </BrowserRouter>
  );
};

 

 

Routes,  Route

• Routes,Route 컴포넌트는 경로를 매칭해주는 역할을 하는 컴포넌트입니다.
• Routes 컴포넌트는 여러 Route 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. 만약, Routes를 사용하지 않으면 매칭되는 모든 요소를 렌더링 합니다.
• Route 컴포넌트는 path 속성을 이용해서 경로를 설정하고 element속성으로 연결하고자 하는 컴포넌트를 넣어주면 됩니다.
• 사용자가 지정된 주소 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있는데 
  이 때 path = "*" 속성을 사용하게 되면 이 속성이 설정되어 있는 컴포넌트를 보여줄 수 있습니다.

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div className='App'>
          <main>
            <Sidebar />
            <section className='features'>
              <Routes> // Route 컴포먼트를 Routes 컴포먼트가 감싸고 있다.
                <Route path='/' element={<Tweets />} />
                // path 속성을 이용하여 경로를 지정하고 element속성으로 연결할 컴포넌트를 넣어주고 있다.
                <Route path='/about' element={<About />} />
                <Route path='/mypage' element={<MyPage />} />
              </Routes>
            </section>
          </main>
        </div>
      </BrowserRouter>
    </div>
  );
};

 

Link

• 경로를 연경해 주는 역할을 하는 컴포넌트입니다.
• 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해
  페이지의 주소만 변경해 줍니다.
• 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있습니다.
• to 속성을 활용하여 이전에 Route 컴포넌트에 설정해 준 path 주소를 연결해 줍니다.
  

  <Link to='/'> // to 속성에 가고자 하는 경로를 Route 컴포넌트의 path 경로에 맞게 작성합니다.
    <i className='far fa-comment-dots'></i> 
    // i 태그는 폰트 어썸에 있는 디자인을 html 형식으로 가져온것입니다.
  </Link>

  <Link to='/about'>
    <i className='far fa-question-circle'></i>
  </Link>

  <Link to='/mypage'>
    <i className='far fa-user'></i>
  </Link>

 

그 다음 , i 태그를 css로 브라우저에서 볼 수 있게끔 작업을 하고 브라우저에서 본다고 가정 해보면 

어떠한 디자인 3개가 나타날 것입니다.

 

요론식으로 말이죵

이 버튼을 각각 따로 눌렀을 때 각각의 다른 화면이 나오게 되는 것 입니다.

 

결론적으로 Router 는 뭐라구여 ?

React SPA는 경로에 따라 다른 뷰를 보여주는데 다른 뷰를 경로에 따라 다른 뷰를 보여 줄 수 있게끔 할 때
사용하는 것이 Router 인 것이다~ 라고 이해하면 된다~