[React] 리액트 라우터 주소창으로 router parameter 보내서 컴포넌트에서 활용하기

리액트를 사용할 때 라우터를 통해서 어떤 컴포넌트를 렌더링하고 싶은데 그 주소로 라우팅을 할 때 동적으로 변화하는 값(여기서는 블로그의 id 값)을 전달해주고 싶을 때가 있다.

만약에 블로그의 고유 id값을 주소로 전달을 해주면 그 해당 id값에 해당하는 블로그만 보여주고 싶을 때 같은 컴포넌트를 렌더링하지만 그 안에 담겨있는 데이터가 다르기 때문에 각각 id에 맞는 블로그를 보여줄 수 있을 것이다.

function App() {
  return (
    <Router>
      <div className="App">
        <NavBar />
        <div className="content">
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/create">
              <Create />
            </Route>
            <Route path="/blogs/:id">
              <BlogDetails />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

위에서 BlogDetails 컴포넌트는 블로그 id를 받아와서 해당 블로그 상세화면을 보여주는 컴포넌트이다. 여기서 route를 통해서 parameter를 보내주고 싶은데 이 때 path="/blogs/id" 와 같이 route에 삽입해주면 BlogDetails 컴포넌트로 라우팅이 되고 주소창에 id 값이 위치하는 곳에 어떤 값을 넣더라도 BlogDetails 컴포넌트에 parameter로 전달이 된다.

이제 이렇게 route를 통해서 전달한 parameter를 컴포넌트에서는 어떻게 받아서 활용할 수 있을까? 아래 BlogDetails 컴포넌트 코드를 한 번 보자.

const BlogDetails = () => {
  const { id } = useParams();
  return (
    <div className="blog-details">
      <h2>Blog details - {id}</h2>
    </div>
  );
}

위 코드에서 useParams() 를 사용해서 id 값을 받아오는 것을 볼 수 있다. 이렇게 받아온 id 값을 원하는대로 활용하면 된다.

<Link to={`/blogs/${blog.id}`}>
	<h2>{blog.title}</h2>
	<p>Written by {blog.author}</p>
</Link>

이렇게 id 값을 route paramter로 넘긴다면 어떤 글을 선택했을 때 다른 컴포넌트로 라우팅을 하면서 id 를 넘겨주고 그 해당 id와 같은 데이터만 데이터베이스에서 받아와서 보여주는 식으로 활용할 수 있다.

출처:

• https://www.youtube.com/watch?v=t7VmF4WsLCo&t=315s