const user = useLoaderData() as User; // loader가 지정된 경로의 컴포넌트에서 사용
const user = useRouteLoaderData('root') as User; // loader가 지정된 경로의 하위 경로에 해당하는 컴포넌트에서 사용
const routes = createBrowerRouter([
{
path: '',
id: 'root',
element: <Root />,
loader: fetchUser,
children: [
{
path: 'service',
element: <Service />
}
]
]);
// user.d.ts
type UserType = {
email: string;
username: string;
}
// Root.tsx
import { Outlet } from 'react-router-dom';
export default function Root() {
const user = userLoaderData() as UserType;
return (
<div>
{user.email} in Root.
<Outlet />
</div>
)
}
// Service.tsx
export default function Service() {
const user = userRouteLoaderData('root') as UserType;
return (
<div>
{user.email} in Service.
</div>
)
}
api
함수를 react-router-dom
에서 제공하는 loader
를 사용하면 컴포넌트가 렌더링 되기 전에 api와 통신후 응답을 받고나서 렌더링에 들어가는 것을 확인했다.
컴포넌트 마운트 단계에서 상태에 api에서 받아온 값이 화면에 뿌려지지 않는 이슈를 해결할 수 있게 해준다.
상위 경로에서 loader를 통해 가지고 있는 데이터를 하위 경로인 자식 컴포넌트들이 가질 수도 있는데 상위 경로에 id키를 추가하고 값을 지정해둔다. 그 id에 해당하는 값을 useRouteLoaderData()
에 인자로 던져준다.
const user = useRouteLoaderData('root') as UserType; // 상위 컴포넌트의 loader에 접근
React.useLayoutEffect(() => {
console.log(user); // 렌더링 되기 전에 user 값 확인
}, [])