[React] 리액트의 라우팅 처리

서론

네비게이션의 특정 메뉴를 클릭하면 해당 페이지로 이동하는게 기본적인 웹사이트의 형태이다.

 

그런데 리액트는 SPA (Single Page Application)으로,

메뉴를 클릭할 때마다 서버에서 새로운 페이지가 날아오는 개념이 아니다.

 

실제는 index.html 파일 하나인데,

이 html 파일에서 필요한 부분만 자바스크립트를 통해 바꿔나가는 형태로 이루어진다.

이러한 방식을 클라이언트 사이드 렌더링(CSR) 이라 한다.

(서버가 파일을 호출하는 게 아니라 클라이언트에서 자바스크립트로 페이지 전환을 하는 방식)

 

리액트에서는 메뉴를 클릭할 때마다

index.html에 특정 컴포넌트가 보이게 바꿔치기 해주고, 그에 맞게 URL을 변경해준다. 

 

 

브라우저의 URL이 바뀔 때마다, 보여줄 컴포넌트를 맵핑하고 렌더링하는 과정을

"라우팅" 이라고 한다.

메뉴를 클릭할 때마다 원하는 컴포넌트를 맵핑시켜서 화면에 보여주는 작업을

"라우팅 처리를 한다" 라고 표현한다. 

 

 

 

라우팅 처리를 위한 라이브러리 다운받기

npm install react-router-dom@latest

라고 작성하여 react-router-dom 최신버전으로 설치하기

 

설치하고 나면 package.json의  "dependecies" 에 "react-router-dom" 정보가 작성된다.

7.1.5 버전으로 설치되었다.

 

 

테스트 화면 만들기

pages 폴더 밑에 Home.jsx와 About.jsx 파일을 만들었다.

 

 

 

main.jsx에 라이브러리 적용하기

 

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import { BrowserRouter } from 'react-router-dom'

import './index.css'

import App from './App.jsx'

createRoot(document.getElementById('root')).render(

  <StrictMode>

    <BrowserRouter>

      <App />

    </BrowserRouter>

  </StrictMode>,

)

 

라우팅처리를 위해 설치했던 react-router-dom을 main.jsx에 적용해야 한다.

main.jsx는 App.jsx에 작성한 내용이 index.html에 보여질 수 있도록 하는 역할을 한다.

 

상단에 import { BrowserRouter } from 'react-router-dom' 를 작성한고,

createRoot 아래 <App />를 <BrowserRouter> 태그가 감싸도록 수정한다.

 

* BrowserRouter는 웹브라우저 라우팅을 처리하는 보편적인 라우터이다.

 

 

App.jsx에 네비게이션과 라우트 만들기

 

import React, { useState } from 'react'

import './App.css'

import {Routes, Route, Link} from "react-router-dom"

import Home from './pages/Home'

import About from './pages/About'

function App() {

  return (

    <main>

      <nav>

        <Link to="/">Home</Link>|

        <Link to="/about">About</Link>

      </nav>

      <Routes>

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

        <Route path="/about" element={<About />} />

      </Routes>

    </main>

  )

}

export default App

 

 

App.jsx 상단에 import {Routes, Route, Link} from "react-router-dom" 를 작성한다.

그리고 Home.jsx와 About.jsx도 import 한다.

 

그리고 nav 태그 안에 Link 태그를 작성한다. 

Link 태그의 to 속성에는 브라우저에서 접근할 주소를 작성하면 된다.

 

* Link 태그는 브라우저에서 a 태그로 변환되어 나타나는 태그이다.

* <Link to="/"> Home </Link> 는 <a herf="/"> Home </a> 와 같은 말이다.

 

그리고 Routes 태그 안에 Route 태그를 작성한다.

Route의 path 속성은 Link 태그의 to 속성과 매칭이 되는 값으로 작성하고,

element 에는 보여줄 컴포넌트를 작성하면 된다. ※ {} 안에 <컴포넌트명 /> 으로 작성해야 함.

 

 

nav의 Link 태그를 클릭하면

-> Link의 to 속성과 동일한 path를 갖는 Route를 찾고,

그 Route의 element에 해당하는 컴포넌트를 보여준다.

 

 

 

화면 결과 확인하기

/로 접근했을 때, <Link to="/" /> 에 해당하는 path="/" 인 Route를 찾아서 Home 컴포넌트를 보여주고 있다.

 

 

 

 

네비게이션 메뉴 About을 클릭했을 때, 주소값이 /about으로 변경되었고,

path="/about"인 Route를 찾아서 About 컴포넌트를 보여주고 있다.

 

 

 

정리

네비게이션 메뉴를 클릭하면 

Link 태그의 to에 지정된 값과 똑같은 path를 갖는 Route를 찾고,

해당 Route의 element에 할당된 컴포넌트를 보여주고 있다.

 

그리고 <nav></nav> 영역 밑의 <div></div>  영역에

호출하는 컴포넌트로 대체되는 것을 알 수 있다.