리액트 앱에서 컴포넌트 렌더링 전에 api 응답을 받아오기

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 값 확인
}, [])