라우터에서 데이터 가져오기
라우터에서 데이터 가져오기
오늘은 라우터를 사용하면서 데이터를 가져오는 것에 대해 공부했다. 수업자료로 백엔드파일과 프론트엔드파일을 받아서 프론트엔드파일에서 백엔드의 데이터를 적용하는 내용이었다.
이를 위해 기본적인 라우터 설정을 마친 뒤, createBrowserRouter 함수 내에서 백엔드 데이터를 적용할 EventsPage 컴포넌트에 loader()라는 속성을 넣어주었다.
💡 loader() 속성: 이 속성은 리액트 라우터의 동적 라우팅을 위해 사용되는 속성 중 하나이며, 해당 경로로 이동할 때 비동기적으로 데이터를 로드하고 처리하는데 사용된다.
속성값으로 함수를 값으로 취하며, 이 속성이 적용된 컴포넌트가 렌더링되기 전에 loader 속성의 함수가 리액트 라우터에 의해 먼저 실행된다.
위 코드에서는 loader 속성의 함수에 비동기 함수를 적용하고, fetch 함수에 백엔드의 데이터링크를 적용해주었다.
이렇게 연결하고나서 이 데이터를 프론트엔드에서 사용하기 위해 EventsPage 컴포넌트에서 useLoaderData 훅을 리액트 라우터 돔 라이브러리에서 불러왔다. 불러온 훅을 events 상수에 저장하고, 이를 EventsList 컴포넌트로 전달하여 표출되게 했다.
위 이미지는 loader 속성과 useLoaderData 훅을 이용해 백엔드 데이터를 성공적으로 불러온 모습이다.
그런데 useLoaderData 훅을 사용할 때 주의할 점이 있다. 위 코드에서는 이 훅을 중첩되면서 자식 컴포넌트에 해당하는 곳에서 사용하고 있다. 만약 이를 더 높은 수준에 있는 라우터에서는 사용할 수가 없다. 위 코드에서 Root 컴포넌트의 내에서 사용하려 하면 안된다는 것이다. 데이터 대신 undefined를 나타내게 된다.
그래서 useLoaderData 훅은 loader 속성을 추가한 라우트와 같은 수준이나 더 낮은 수준에 있는 컴포넌트에서 사용해야 한다.
