[78일차] react 라우트

라우팅이란?

라우팅은 경로를 의미하는 Route 와 진행을 뜻하는 ing가 합쳐진 단어로, '경로를 지정하는 과정'을 의미한다.

페이지 라우팅은 요청에 따라 적절한 페이지를 반환하는 일련의 과정이다.

 

1-1. 프로젝트 생성

npm init react-app <프로젝트명>

 

1-2. 리액트 라우터 설치

npm i react-router-dom

 

1-3. 실행방법

npm start

 

2.프로젝트에 라우터 적용하기 

리액트 라우터가 제공하는 BroserRouter 컴포넌트로 App를 감싸면 된다.

BrowerRouter 브라우저의 주소 변경을 감지하는 기능이 있다. 

이 라우터는 컴포넌트가 페이지를 구성하고 이동하는데 필요한 기능을 다양하게 제공한다.

index.js를 수정한다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
	<BrowserRouter>
    	<App/>
    </BrowserRouter>
)

Home: 인덱스페이지 ./pages/Home.js

Add: 입력페이지 ./pages/Add.js

List: 리스트페이지 ./pages/List.js

 

3. 페이지 라우팅 구현하기

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

const App = () => {
  return (
    <div className="App">
      {/* 리액트 라우터로 페이지 라우팅을 구현하는 앱에서는 Link라는 컴포넌트를 이용한다. */}
      <div className="Nav">
          <Link to={"/"}>Home</Link>
          <Link to={"/add"}>Add</Link>
          <Link to={"/list"}>List</Link>
      </div>


      <Routes>
        {/* 현재 URL 경로에 맞게 적절한 Route 컴포넌트를 페이지에 렌더링 한다.*/}
        <Route path="/" element={<Home/>}/>
        <Route path="/add" element={<Add/>}/>
        <Route path="/List" element={<List/>}/>
      </Routes>
    </div>
  );
}

export default App;