10/5 TIL : React Router

🔎 public 폴더 사용

• 상대 경로를 이용해서 src 폴더 이상으로 가서 다른 폴더에 접근하여 내려가는 방식, 절대 경로를 이용하는 방식 사용 불가
• 기존 백엔드에서는 public 폴더를 static이라는 express 메소드를 사용해서 특정 주소 값을 요청하면 연결이 되었음
• npx create-react-app을 통해 만들어진 리액트 앱의 경우는 public 폴더가 자동으로 static 처리됨
• 따라서 어느 위치에서건 / 를 써서 접근하면 public 폴더를 호출할 수 있음

 

🔎 Composition(합성), Specialization, Containment

 

🔎 React Router

• 리액트에서는 컴포넌트별 라우팅이 가능
• [터미널] npm i react-router-dom
• index.js 에서 App 컴포넌트를 <BrowserRouter>로 감싸기

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </>
);

reportWebVitals();

• Routes 컴포넌트 내부에 Route 컴포넌트를 넣어주고 각각의 주소 값은 path에, 호출할 컴포넌트는 element 속성으로 불러주기
• <a> 태그는 브라우저 레벨에서 페이지를 자동으로 새로고침 하기 때문에 React에서는 이를 막고자 <Link to="">라는 컴포넌트 사용

// src/app.js
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Header />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/board" element={<Board />} />
        <Route path="/board/:boardID" element={<BoardDetail />} />
      </Routes>
    </div>
  );
}

export default App;

 

🚩 PageNotFound

• 잘못 입력된 주소에 대한 예외 처리
• * 는 모든 주소 입력을 의미함
• React-router-dom도 코드 선언 순서에 따라 처리되기 때문에 마지막 라우터에서 *를 사용하여 처리하면 일치하지 않은 주소를 한꺼번에 처리할 수 있음

// src/app.js
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Header />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/board" element={<Board />} />
        <Route path="/board/:boardID" element={<BoardDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

export default App;

 

🚩 주소 parameter 활용

• parameter는 useParams로 선언한 객체 변수에 담기게 됨

// src/components/Board.js
import { Link } from "react-router-dom"
import Header from "./Header"

export default function Board() {
  return (
    <>
      <Header />
      <h1>게시판 페이지입니다.</h1>
      <Link to="1"><h2>게시글 1번</h2></Link>
      <Link to="2"><h2>게시글 2번</h2></Link>
    </>
  )
}

// src/components/BoardDetail.js
import { useLocation, useParams } from "react-router-dom"
import Header from "./Header"

export default function BoardDetail() {
    const { boardID} = useParams();
    
    return (
        <>
            <Header />
            <h1>{boardID}번 게시글입니다.</h1>
        </>
    )
}

 

🚩 주소 query 받기

• 원래 query는 react-query 모듈을 사용함
• 이번에는 간단하게 확인만 할 것이므로 react-router-dom의 기능 활용
• search: ?를 포함한 query string
• path: 현재의 주소
• hash: 주소에 들어있는 # 문자열 뒤의 값(해시 주소 값)

// src/components/BoardDetail.js
import { useLocation, useParams } from "react-router-dom"
import Header from "./Header"

export default function BoardDetail() {
    const { boardID} = useParams();
    const location = useLocation();
    
    return (
        <>
            <Header />
            <h1>{boardID}번 게시글입니다.</h1>
            <p>쿼리: {location.search}</p>
            <p>주소: {location.pathname}</p>
            <p>해쉬: {location.hash}</p>
        </>
    )
}