노마드 마스터클래스 강의,
react-router-dom에서useOutletContext를 사용해서<Outlet />에 데이터를 전달하는 내용을 정리했습니다.
React-router-dom
useOutletContext()
useOutletContext로 Outlet을 통해 렌더된 컴포넌트에 데이터를 전달할 수 있다. 직접 접근할 수 있는 url을 가질 수 있고 여러 자식 요소들에 Outlet으로 동일한 데이터를 전달할 수 있다.
useParams를 이용해서 url 파라미터로 각 유저 정보를 렌더하는 예시에 이이서 각 유저의 더보기 정보인 <UserInfo />를 Outlet으로 렌더한다.
Router
/users/:userId/info로 접속할 때 사용자의 더보기가 나올 수 있도록 했다.
const router = createBrowserRouter([
{
path: '/',
element: <App />,
children: [
{
path: '',
element: <Home />,
},
{
path: 'users',
element: <Users />,
children: [
{
path: ':userId',
element: <User />,
children: [
{
path: 'info',
element: <UserInfo />,
},
],
},
],
},
],
errorElement: <NotFound />,
},
]);
export default router;User
유저의 기본 정보를 작성한 User 컴포넌트에 더보기 버튼을 눌렀을 때, /info 경로로 라우팅을 연결해 주었다. context에는 배열, 오브젝트, 스트링, 넘버 등 데이터를 전달할 수 있다.
import { useParams, Outlet, Link } from 'react-router-dom';
import members from '../../data/db';
function User() {
const { userId } = useParams();
const [userInfo] = members.filter(el => el.userId === Number(userId));
return (
<div>
<h1>{userInfo.name}님의 정보</h1>
<ul>
<li>{userInfo.name}</li>
<li>{userInfo.profile}</li>
<li>
<Link to="info">...more</Link>
</li>
</ul>
<Outlet
context={{
userInfo: userInfo.desc,
}}
/>
</div>
);
}
export default User;UserInfo
User에서 전달한 userInfo를 useOutletContext로 받아서 렌더한다.
import { useOutletContext } from 'react-router-dom';
interface UserInfoConText {
userInfo: string;
}
function UserInfo() {
const { userInfo } = useOutletContext<UserInfoConText>();
return (
<div>
<h1>{userInfo}</h1>
</div>
);
}
export default UserInfo;출처
XD