React Router

 

React Router

React Router는 SPA에서 브라우저 새로고침 없이 URL 경로에 따라 페이지를 전환할 수 있게 해주는 라이브러리입니다.

 

 

설치 (꼭 프로젝트가 존재하는 폴더로 이동 후 깔 것)

npm install react-router-dom

 

 

package.json 파일 내에

"react-router-dom": "^7.6.3",

가 존재하면 성공적으로 설치된거임

 

 

사용 예시

 

App.js

/* eslint-disable no-unused-vars */
import logo from './logo.svg';
import './App.css';
import Hello from './component/hello';
import Header from './component/Header';
import Day from './component/Day';
import DayList from './component/DayList';
import {BrowserRouter,Routes,Route} from 'react-router-dom';
import NotFoundPage from './component/NotFoundPage';
/*
리액트 라우팅 기능을 위한 설정
리액트 라우팅 : URL요청 별 다른 컴포넌트호출
 */
function App() {
  return (
    <BrowserRouter>{/*BrowserRouter : 최상위 라우팅 컴포넌트*/}
    <div className="App">       
      <Header/>
      <Routes>{/*Routes : Route컴포넌트의 부모 컴포넌트 */}        
        <Route path="/" element={<DayList/>}/>{/*요청 시 DayList컴포넌트 조회 */}
        <Route path="/day/:day" element={<Day/>}/>{/*요청 시 Day컴포넌트 조회  /day/:day -> ex) local.../day/xxx */}
        <Route path="*" element={<NotFoundPage/>}/>{/*페이지가없는경우 */}
      </Routes>    
    </div>
    </BrowserRouter>
  );
}

export default App;

BrowserRouter->Routes->Route 구조

(중요포인트 : path="*" element={<NotFounPage/>}가 가장 마지막에있는것을 확인할 수 있는데

위의 주소를 제외한  모든 주소들을 받는단 의미 ) (맨 위에써버리면 모든 요청을 받아버림)

 

data.json

0.00MB

 

day.js 

(Day 컴포넌트) (위에 올려둔 data.json을 사용함)

import data from "../db/data.json"
import {useParams} from "react-router-dom" //라우터에서 제공되는 parameter를 가져옴
export default function Day(){
    const {day} = useParams();
   
    //(word.day(json객체의 키 값)===day(변수값)
    //useParams() : 문자열
    //word.day : 숫자
    const wordlist = data.words.filter(word=>(word.day===Number(day)))
    return(
<>
<h2>Day{day}</h2>
<table>
<tbody>
    {/*"words": [
    {
      "id": 1,
      "day": 1,
      "eng": "book",
      "kor": "책",
      "isDone": false
    },{....}] */}
    {/*data.words(배열)를 순회해 각 요소에 id,eng,kor만 뽑아서 하나의행으로*/}

    {wordlist.map(word=>(
        <tr>
            <td>{word.eng}</td>
            <td>{word.kor}</td>
        </tr>
    ))}
</tbody>
</table>
</>
    );
    
}

dayList.js

(DayList 컴포넌트)

import data from "../db/data.json"
import {Link} from "react-router-dom"
/*
<li key={m.id}></li>
리액트에서 리스트항목 출력 시 고유한값 필요
변경된 부분의 판단을 위해 key속성 사용
*/
export default function DayList(){
    return(
        <>
            <h2>day 리스트</h2>
            <ul className="list_day">
            {data.days.map((m)=>(            
                <li key={m.id}>
                    <Link to={`/day/${m.day}`}>Day{m.day} </Link>
                </li>
                    
            ))}
           </ul>
        </>
    )
}

클릭 시 각 숫자를 기반으로 /day/숫자 로 이동

---

NotFoundPage.js

(NotFoundPage 컴포넌트)

 

a태그 : 외부링크이동 (HTML기본) 
 - 브라우저 전체페이지를 새로고침

Link태그 : React router전용태그
 - 화면에 새로고침 X

import {Link} from "react-router-dom"
export default function NotFoundPage(){
    return(
        <>
         <h2>없는페이지임</h2>
        <Link to="/">돌아가기</Link>
        </>
    );
}

 

시연