리액트를 사용할 때 라우터를 통해서 어떤 컴포넌트를 렌더링하고 싶은데 그 주소로 라우팅을 할 때 동적으로 변화하는 값(여기서는 블로그의 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와 같은 데이터만 데이터베이스에서 받아와서 보여주는 식으로 활용할 수 있다.