React Router Dom

라우팅

---

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 리액트는 SPA이므로 하나의 index.html 템플릿 파일을 가지고 있다. 자바스크립트를 이용해서 다른 컴포넌트를 이 하나의 템플릿 파일에 넣어서 페이지를 변경해주게 되는데, 이때 React Router Dom 라이브러리가 새 컴포넌트로 라우팅 및 탐색, 렌더링하는 데 도움을 준다.

설치하기

---

npm install react-router-dom --save

설정하기

---

BrowserRouter 로 root 컴포넌트를 감싸기

• BrowserRouter : HTML5 History API(pushState, replaceState, popstate 이벤트)를 사용해 UI를 URL과 동기화된 상태로 유지한다.

// index.js

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

ReactDOM.render(
  <BrowserRouter>
  	<App />
  </BrowserRouter>,
  document.getElementById('root')
);

여러 컴포넌트 생성 및 라우트 정의

• Routes : 앱에서 생성될 모든 개별 경로에 대한 컨테이너/상위 역할을 한다. Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링 해준다.
• Route : 단일 경로를 만드는 데 사용된다.
  • path : 원하는 컴포넌트의 URL 경로 지정
  • element : 경로에 맞게 렌더링되어야 하는 컴포넌트 지정

// App.js

function App() {
  return (
    <div className="App">
    	<Routes>
    		<Route path="/" element={ <Home/> } />
			<Route path="about" element={ <About/> } />
            // 상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트 없는경우 처리
			<Route path="*" element={ <NotFound /> } />
        </Routes>
	</div>
  )
}

<Link/> 를 이용해 경로 이동

• Link : HTML의 앵커 요소 <a/> 와 유사

// Home.js

import { Link } from 'react-router-dom";

function Home() {
  return (
    <div>
    	<h1>홈페이지</h1>
    	<Link to="about">About 페이지 보여주기</Link>
    </div>
  );
}

export default Home;

React Router Dom APIs

---

중첩 라우팅

• 하나의 파일에 모든 경로 지정
• 부모 경로 요소에서 Outlet 속성 사용 => 자식 경로 요소 렌더링

import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='user' element={ <User/> } >
          <Route path='detail' element={ <UserDetail/> } />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function User() {
  return (
    <>
      <Outlet />
    </>
  )
}

useNavigate

navigate("../success",  { replace: true });

• 첫번째 인자로 받은 경로로 변경
• replace (true or false)
  • true => navigate에 적힌 주소로 넘어간 후 뒤로가기 하면 이전 페이지로 돌아가지 않고 메인 페이지(/)로 돌아감
  • false => 뒤로가기가 가능, 기본값

function Button() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/another");
  }
    
  return (
   <button onClick={handleClick}>이동</button>
  );
}

useLocation

✳️ queryString

URL에 데이터를 포함시켜 추가적인 정보를 서버로 전달하는 방법

• URL 주소 이후에 ? 부터 queryString 시작
• parameter=value 형태로 데이터 전달
• 파라미터 여러개일 경우 & 로 연결하여 전달
  
  예시: https://elice.io/courses?name=elice&year=2022

• 현재 URL의 정보를 가지는 위치 객체를 반환
• location 객체의 대표적인 속성값
  • pathname: endpoint를 의미 (ex: /courses)
  • search: ? 이후의 queryString 값
  • state: 이전 페이지로부터 전달받은 인자
• 현재 위치가 변경될 때마다 일부 side effect를 수행할 경우 유용함
  
  

location 객체의 search 속성값과 URLSearchParams 객체를 함께 사용하면 queryString의 key, value 값을 쉽게 가져올 수 있다.

const location = useLocation();
const info = new URLSearchParams(location.search);
// info.get(키 이름) => queryString에 담긴 해당 key값의 value 추출

return (
  <div>
    name: {info.get("name")}
    phone: {info.get("phone")}
    addr: {info.get("addr")}
  </div>
);

useParams

URL이 데이터 값에 따라 변하는 동적 라우팅 방식에는 queryString 방식 외에도 URL parameters를 이용하는 방식도 있다.

• URL path에 :를 사용하여 URL에 파라미터를 첨가
• URL에 첨가되는 파라미터를 직접 라우팅 해줘야 함

import { Routes, Route, useParams } from 'react-router-dom';

function App() {
  return (
      <Routes>
        <Route path="invoices/:invoiceId" element={ <Invoice/> } >
        </Route>
      </Routes>
  );
}

function Invoice() {
  let params = useParams();
  return <h1>Invoice {params.invoiceId}</h1>;
}