여러 가지 라우터 훅과 함수

 

loader() 코드를 저장해야 하는 위치

 

loader() 함수의 코드는 저번에 올렸던 포스팅에서처럼 App.js 파일에 할 수 있지만, 특정 컴포넌트의 loader() 함수임을 밝히고 싶을 때는 해당 컴포넌트 내에서 만들어서 이를 App.js 파일에서 불러올 수가 있다.

loader 함수가 저장되는 위치

위 코드는 기존에 App.js 파일에 있었던 loader 함수의 코드를 EventsPage 컴포넌트의 export default 구문 아래로 옮기고, 이를 App.js 파일에서 eventsLoader라는 이름으로 불러와서 createBrowserRouter 함수의 children 속성 내 EventsPage 컴포넌트에 해당하는 곳의 loader 속성에 적용해주었다.

 

이렇게 해당 컴포넌트에 저장하는 것은 일반적이며, App.js 파일의 코드를 줄일 수 있어 효율적이기도 하다.

 

loader 함수가 실행되는 시기

 

loader 함수는 일반적으로 리액트 애플리케이션에서 비동기 데이터를 로드하고 처리하는 데 사용된다. 또 함수형 컴포넌트에서 useEffect 훅을 통해 실행될 수 있다.

useEffect 훅을 통해 실행되고 있는 loader 함수

위 코드는 백엔드 파일의 코드인데, setTimeout을 사용하여 프론트엔드의 events가 1.5초 이후에 실행되도록 하고 있다. 이 코드에 의해 events 페이지로 이동하면 1.5초 후에 페이지가 로딩되는 것을 확인할 수 있었다.

 

현재 네비게이션 상태를 UI에 반영하기

 

이는 백엔드 파일에서 설정했던 useEffect 훅에 의해 1.5초 후에 실행되는 것과 관련이 있다. 로딩되는 동안 사용자는 왜 안되고있는지 궁금해할 수밖에 없다. 그래서 그 사이에 Loading...이라는 문구가 뜨도록 했다.

useNavigation 훅의 사용

이를 위해 Root 컴포넌트에서 useNavigation 훅을 사용했다. 

 

💡 useNavigation 훅: 이 훅은 네비게이션 기능을 간편하게 사용할 수 있도록 도우며, 현재 라우터의 정보를 제공한다. 이 훅을 사용하면 수행할 수 있는 대표적인 4가지 작업이 있다.
1. 현재 경로 정보 가져오기: useNavigation 훅을 사용하면 현재 애플리케이션의 경로 정보를 가져올 수 있다. 이를 통해 현재 라우터의 경로, 매개변수, 쿼리 파라미터 등에 접근할 수 있다. 
2. 경로 이동: useNavigation 훅은 경로 이동을 위한 함수들을 제공한다. 예를 들어, 다른 경로로 이동하거나 경로에 매개변수나 쿼리 파라미터를 추가할 수 있다.
3. 프로그래밍 방식으로 경로 조작: 이 작업의 예를 들면, 특정 이벤트 발생 시에 동적으로 경로를 변경하거나, 뒤로 가기/앞으로 가기와 같은 탐색 동작을 수행할 수 있다.
4. 네비게이션 이벤트 처리: 이 작업의 예시로, 페이지 이동 전에 추가적인 동작을 수행하거나, 라우터 변화에 따라 상태를 업데이트할 수 있다.

 

그리고 navigation 상수에 useNavigation 훅을 적용하고, 상태가 loading이면 Loading...이라는 단락이 나타나도록 했다.

 

loader()에서 응답 리턴하기

 

이는 loader 함수를 통해 응답을 받았을 때 이를 리턴해서 사용자에게 보여주는 것을 말한다. 

응답 리턴

위 코드에서 백엔드 주소로부터 응답을 받고, ok 값이 false이면 에러메세지가 뜨도록 리턴하도록 하고 있다. 리턴 방법에는 세 가지가 있는데, 첫 번째는 ok가 false일 때 true가 되는 isError를 정의하고, isError가 true일 때 에러메세지가 뜨게 하는 방법이다.

 

두 번째는 Response를 반환하는데, json 형식으로 바뀐 메세지를 서버상태가 500일 때 뜨도록 하는 방법이다.

세 번째는 라우터 라이브러리의 json 훅을 사용하는 방법인데, 서버상태가 500일 때 사용할 메세지를 입력만 하면 된다. 개인적으로 세 번째 방법이 제일 간편했다. json 훅을 사용하면 두 번째 방법에서 사용한 긴 코드를 작성하지 않아도 된다. 훅을 사용함으로 인해 자동으로 적용이 되는 것이기 때문이다.

 

loader()로 가는 코드의 종류

 

loader 함수 안에서 정의된 코드는 서버가 아닌 브라우저에서 실행된다. 이는 loader 함수에서 어떤 브라우저 API도 사용할 수 있다는 의미이다.

 

loader 함수에서 로컬 저장소에 액세스할 수 있으며, 쿠키에도 액세스할 수 있고, 자바스크립트 코드에서 할 수 있는 모든 것을 할 수 있다.

 

단, useState 같은 리액트 내에서만 사용이 가능한 것들은 loader 함수 내에서 사용할 수 없다. loader 함수는 리액트 컴포넌트가 아니며, 사용하게 되면 작동하지 않게 된다. 그 것 외에는 다른 모든 브라우저 기본 기능은 loader 함수에서 사용할 수 있다.

 

오류 데이터를 추출하고 응답 내보내기

 

라우터 라이브러리에는 오류가 발생했을 때 기본적인 오류창이 뜬다. 하지만 이는 개발자에게만 정보를 주게 되어 사용자는 혼란스럽기 때문에 커스텀 오류 처리를 하게 된다.

useRouteError 훅의 사용

위 코드는 Error 컴포넌트에서 오류처리를 하는 코드이다. title과 message가 정의되어 있고, 서버상태가 500일 때, 404일 때 뜨는 변수의 값을 달리 정의해주었다. 그리고 라우터 내에서 발생한 오류를 감지하고 처리하기 위해 useRouteError 훅을 사용하여 error 상수에 적용해주었다.

오류처리 예시

loader 함수를 여러 컴포넌트에서 함께 사용하기

 

똑같은 loader 함수는 사용하고자 하는 컴포넌트에서 모두 사용할 수 있다. 그러나 중복된 코드는 좋지 않기 때문에 라우터 라이브러리에는 이를 해결할 수 있는 훅이 하나 있다.

useRouteLoaderData 훅의 사용

이 훅은 useRouteLoaderData 훅이다. 위 코드는 event의 세부내용을 다루는 컴포넌트 내의 loader 함수인데, 이 함수를 다른 컴포넌트에도 사용하고 싶어서 이 훅을 사용해주었다.

다른 컴포넌트에 공통된 loader 함수 적용

이 훅을 사용한 컴포넌트의 loader 함수는 App.js 파일에서 eventDetailLoader라는 이름으로 불러와서 해당되는 곳의 loader 속성에 적용해주었고, 적용해 준 컴포넌트의 children 속성에 loader 함수를 공통으로 사용할 컴포넌트들을 넣어주었다. 

 

그리고 이 훅을 적용하기 위해서는 id가 필요하다. 그래서 loader 함수를 적용한 곳에 event-detail이라는 id를 만들고, 이를 해당 컴포넌트에서 useParams 훅으로 이를 참조하도록 했다. 

 

이렇게 useRouteLoaderData 훅을 사용하면 코드의 중복을 피할 수 있어서 편리하다.