Axios 모듈화 with 커스텀 훅

API 요청을 보낼 때 공통적으로 access_token을 헤더에 담아서 보내야 해서 BaseURL도 묶을 겸 모듈화를 하려고 했다.

현재 access_token을 redux에 저장하고 있어서 redux에 접근하여 데이터를 가져오려고 했다

// axios 사용
import axios from "axios";

// Redux 관련
import { RootState } from "@/store/configureStore";
import { useSelector } from "react-redux";

//redux에서 access token 받아오기
const {userInfo} = useSelector((state : RootState) => state.auth);

// 남사친 API 커스텀
export const customBoyAxios = axios.create({
    baseURL: process.env.NEXT_PUBLIC_FRIEND_BOY_URL,
    headers: {
        "access_token" : userInfo.access_token
    }
});

// 여사친 API 커스텀
export const customGirlAxios = axios.create({
    baseURL: process.env.NEXT_PUBLIC_FRIEND_GIRL_URL,
    headers: {
        "access_token" : userInfo.access_token
    }
});

초기 코드는 위와 같았다. 

모듈을 가져와서 사용하려고 하니 에러가 났다.

useSelector Hook의 선언 위치가 잘못되었다는 에러였다.

함수형 컴포넌트 안에 선언할 수 있는 방법에 대해 고민했다.. 모듈을 export 해야 되는데 useSelector도 사용해야 하고..

그동안 구글링을 하면서 커스텀 훅을 사용하는 경우를 종종 보았는데, 커스텀 훅으로 axios 모듈을 빼보면 어떨까 싶어서 커스텀 훅을 만들어서 처리해 보았다.

// axios 사용
import axios from "axios";

// Redux 관련
import { RootState } from "@/store/configureStore";
import { useSelector } from "react-redux";

function useCustomAxios() {

    //redux에서 access token 받아오기
    const {userInfo} = useSelector((state : RootState) => state.auth);

    const customBoyAxios = axios.create({
        baseURL: process.env.NEXT_PUBLIC_FRIEND_BOY_URL,
        headers: {
            "access_token" : userInfo.access_token
        }
    });

    const customGirlAxios = axios.create({
        baseURL: process.env.NEXT_PUBLIC_FRIEND_GIRL_URL,
        headers: {
            "access_token" : userInfo.access_token
        }
    });
    
    return {customBoyAxios, customGirlAxios}
}

export default useCustomAxios;

위 처럼 작성하였더니, 함수형 컴포넌트 안에서 useSelector도 사용할 수 있었고 모듈을 훅 자체를 export 하면서 내부 인스턴스까지 export 되었다.

실행도 문제 없이 잘 되었다.

일단 문제는 해결했는데 고민 거리가 생겼다. access_token의 저장 위치를 리듀서가 아닌 로컬 스토리지나 캐시에 저장해야할 것 같은데 이 부분에 대해 더 알아봐야 겠다.