[241119 TIL] 본캠프 35일차 ('뉴스피드' 프로젝트 3일차)

웹사이트를 개발하다보면 사용자가 아무런 동작을 하지 않아도, 즉 화면이 렌더링 됨과 동시에 어떠한 데이터를 불러와서 화면에 보여줘야 할 때가 종종 있는데 이럴 때 많은 사람들이 useEffect 내에 데이터를 불러오는 로직을 작성한다.

 

하지만 이러한 방식으로 구현할 경우, 아래와 같은 과정을 거치지 때문에 불필요한 렌더링이 발생한다.

 

1. 초기 렌더링

2. useEffect + useState로 인해 state 업데이트

3. state가 업데이트 됨에 따라 리렌더링

 

react-router-dom에서 제공하는 loader를 사용하면 데이터를 불러온 뒤에 렌더링이 발생하게 함으로써 불필요한 렌더링을 줄일 수 있다.

 

코드

loader를 사용하지 않았을 때는 BrowserRouter를 사용해서 라우팅을 구현했다.

export default function Router() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/signin" element={<SignIn />} />
                <Route path="/signup" element={<SignUp />} />
                <Route path="/" element={<Home />} />
            </Routes>
        </BrowserRouter>
    );
}

 

 

loader를 사용하기 위해서는 아래 4가지 중에서 하나를 사용하면 되는데, 나는 createBrowserRouter를 사용하였다.

• createBrowserRouter
• createMemoryRouter
• createHashRouter
• createStaticRouter

const router = createBrowserRouter([
    { path: '/signin', element: <SignIn /> },
    {
        path: '/signup',
        element: <SignUp />,
        loader: async () => {
            return { teams: await fetchTeams() };
        }
    },
    { path: '/', element: <Home /> }
]);

export default function Router() {
    return <RouterProvider router={router} />;
}

 

loader를 이용해서 불러온 데이터는 useLoaderData를 이용하면 사용 가능하다.

const { teams } = useLoaderData();