리엑트에는 client server routing을 지원하는 React Router 가 존재한다.

먼저 React Router에 대해 설명한 Docs를 살펴보자.

Client side routing allows your app to update the URL from a link click without making another request for another document from the server. Instead, your app can immediately render some new UI and make data requests with fetch to update the page with new information.

React는 클라이언트 서버 라우팅을 통해 서버의 request나 개입 없이 app의 URL을 변경할 수 있다. 또한 React Router를 통해 링크를 클릭하는 것 만으로 서버와의 통신 없이 react 자체로 새로운 값을 render할 수 있다.

React Router 사용하기

---

설치

React Router를 사용하기 위해 react-router-dom을 설치 해주어야 한다.

$ npm i react-router-dom

React Router는 현재 v6이 최신 버전이다. v5를 사용하는 프로젝트들도 많이 있는걸로 알고있지만 최신 버전인 v6을 사용해야 겠다.

실습하기

React Router의 기본적인 사용 방법은 아래와 같다.

<Routes>
  <Router path=경로 element=컴포넌트 />
</Routes>

이후 Router 끼리 이동할 수 있는 통로 역할을 하는 Link를 추가해 주어야 한다.

<Link to=목적지></Link>

기본적인 기능을 알게되었으니 간단한 실습을 통해 Router를 사용하는 방법에 대해 알아보자.

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/detail" element={<Detail />}></Route>
      </Routes>
    </Router>
  );
}

const Home = () => {
  return (
    <div>
      <h1>This is Home Screen</h1>
      <Link to="/detail">Go to detail</Link>
    </div>
  );
};

const Detail = () => {
  return (
    <div>
      <h3>This is Detail Screen</h3>
    </div>
  );
};

어플리케이션을 새로고침 하는 과정 없이 Router를 통해 서로 다른 screen을 이동할 수 있는 것을 확인 할 수 있다.

useParams()

useParams()를 이용하면 Router 끼리 정보를 공유할 수 있다. useParams()를 이용해 Link를 통해 넘겨준 값을 새로운 Route에서 사용할 수 있다.

Router를 통해 값이 제대로 넘어가는 지 확인하기 위해 간단한 인물 Card를 만들었다.

const User = () => {
  const Users = [
    {
      id: 1,
      name: "Garrett Taylor",
      age: 44,
      country: "Greece",
    },
	...
  ];
  return (
    <Container>
      {Users.map((card) => (
        <Card key={card.id}>
          <Link to={`detail/${card.id}`}>
            <span>{card.id}</span>
            <span>
              {card.name}({card.age})
            </span>
            <span>{card.country}</span>
          </Link>
        </Card>
      ))}
    </Container>
  );
};

카드를 클릭하면 Detail screen으로 이동 하면서 useParams()를 이용해 card의 정보를 Detail에서 이용하게 하였다.

const Detail = () => {
  const { id } = useParams();
  return (
    <div>
      <h3>This is Detail Screen</h3>
      <h2>You choose card no.{id}</h2>
    </div>
  );

클릭한 Card의 번호가 각각의 Detail 화면에 표시되는 것을 알 수 있다.

마치며

---

React Router를 이용하여 페이지의 새로고침 없이 화면에 렌더링 되는 정보를 바꿔보았다.

SPA(Single Page Application) 개발에 특화된 React 특성 상 Router를 이용하면 다양한 효과를 줄 수 있다고 생각한다.