Nextjs 에서 fetch 커스텀하여 사용하기(feat. 이중 화살표 함수)

지난번에 https://minju-k.tistory.com/15 에서 Next.js 는 다양한 캐싱 옵션을 가지고 있는 fetch를 이용하길 권장하는 것을 알아보았다.

 

이 글에서는 그래서 어떻게 프로젝트에 fetch를 사용하면서도 axios를 쓸 때처럼의 이점을 누리도록 했는지 글을 써보기로 한다. 만들 때에는 아래에 레퍼런스로 걸어놓은 return-fetch 라이브러리를 참고하였다.

 

axios는 fetch에 반해 다음과 같은 이점을 가지고 있다.

 

- 기본적으로 데이터를 별도 serialize, deserialize 할 필요가 없이 객체 형태로 바로 사용할 수 있다.
- baseUrl을 설정할 수 있다.
- default header를 설정할 수 있다.
- request, response interceptor를 활용할 수 있다.

 

내가 맡은 새로운 프로젝트에서는 baseUrl을 총 4개를 사용하고 있기 때문에,

axios를 사용할때 기본 옵션들을 지정하여 여러 개의 axiosClient를 만들듯이, fetch도 기본 옵션을 다르게 설정한 호출 객체를 만들어 활용하고 싶었다.

 

따라서 우선 DefaultOption을 지정할 수 있도록 만들었다. 기본적인 형태는 axiosClient를 만들때와 같다.

import Cookies from 'js-cookie';

interface IRequestOptions {
  method?: string;
  headers?: Headers;
  mode?: string;
  cache?: string;
  body?: Record<string, any> | string;
}

interface IInterceptors {
  request: (args: IRequestOptions) => void;
}

interface IDefaultOptions {
  baseURL: string | undefined;
  headers: {
    'Content-type': string;
    'X-SNAPS-CHANNEL': string;
  };
  mode: string;
  interceptors: IInterceptors;
}

const defaultOptions: IDefaultOptions = {
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
    'X-SNAPS-CHANNEL': 'DA_WEB',
  },
  mode: 'cors',
  interceptors: {
    request: (args: IRequestOptions) => {
      const token = Cookies.get('OH_PRINT_ME_GROUND_USER_TOKEN');

      if (!token) return;

      if (token) {
        if (!args.headers) {
          args.headers = new Headers();
        }
        args.headers.set('X-SNAPS-TOKEN', token);
      }
    },
  },
};

 

그리고는 DefaultOption을 기본으로 받고, url과 option을 받아 API를 호출한 후 응답을 리턴해주는 fetcher함수를 만들었다.

 

defaultOption만 다르게 만들어주면, baseUrl이나 기본적인 interceptor 사용 옵션들이 달라진다 해도 계속 이 fetcher 함수를 사용할 수 있게 된다.

 

이 때 이중 화살표 함수를 사용했는데, 이렇게 하면 fetcher를 사용할 때마다 defaultOption을 인자로 보내주지 않아도 기본적으로 이를 활용한 내부 함수를 반환할 수 있기 때문이다.

const fetcher =
  (defaultOptions: IDefaultOptions) =>
  async (url: string, options: IRequestOptions = {}) => {
    const requestOptions: IRequestOptions = {
      method: options.method || 'GET',
      headers: new Headers(defaultOptions.headers),
      mode: defaultOptions.mode,
      ...options,
    };

    defaultOptions.interceptors.request(requestOptions);

    const fullURL = defaultOptions.baseURL + url;

    if (requestOptions.method === 'POST' && requestOptions.body !== undefined) {
      requestOptions.body = JSON.stringify(requestOptions.body);
    }

    try {
      const response = await fetch(fullURL, requestOptions);

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }

      const data = await response.json();
      return data;
    } catch (error) {
      console.error(error);
      throw error;
    }
  };

 

여러 개의 화살표 함수

여러 개의 화살표 함수를 더 확실하게 이해하고 가자.

const add = a => b => {
 return a + b;
}

const add = a + b => {
  return a + b;
}

 

이 두 함수의 차이점은, 첫 번 째는 a를 인자로 받는 외부함수가 b를 인자로 받는 내부 함수의 결과값을 리턴하는 형태이고, 두 번째는 a,b를 동시에 인자로 받아서 그 합계를 리턴하는 형태라는 것이다.

 

첫 번째 함수를 우리에게 익숙한 형태로 풀어서 작성해 보면 다음과 같다.

function(a){
  function(b){
    return a + b;
  }
}

function(a,b){
  return a + b;
}

 

 

이렇게 이중 화살표 함수를 사용할 때의 장점은 a를 매번 인자로 넘겨주지 않아도, 이 a를 기본으로 활용한 함수를 만들 수 있다는 것이다. 아래는 이를 활용하여 어떤 값을 넣더라도 기본적으로 인자로 넘겨놓은 2를 더해주는 함수이다. 

const add = a => b => a + b;

const add2 = add(2);

console.log(add2) // b => 2 + b;

add2(3); // 5
add2(4); // 6

 

 

따라서 fetcher도 defaultOption을 기본적으로 활용한 내부 함수를 반환하도록 만든 것이다.
최종적으로 다음과 같은 customFetcher 함수를 만들고, 호출 시에는 다음과 같이 사용하도록 했다.

export const customFetcher = fetcher(defaultOptions);
// 위의 add2와 같은 함수를 만든 것이다!!

// method 옵션을 별도로 넘기지 않았을 때는 기본적으로 GET을 사용하도록 되어 있으니 다음과 같이 공통 SWRConfig를 만들어주었다.
export default function SWRConfigContext({ children }: Props) {
  return (
    <SWRConfig
      value={{
        refreshInterval: 3000,
        fetcher: (url: string) => customFetcher(url),
      }}
    >
      {children}
    </SWRConfig>
  );
}

// POST나 cache option 사용시
  const data = await customFetcher(url, {
    method: 'POST',
    body: { loginId, password },
    method : 'no-store'
  });

 

이제 axios에서 axiosClient를 호출해서 사용하듯이 customFetcher를 사용해서도 axios처럼 간단히 API호출 결과를 받을 수 있게 되었다.

이중 함수를 사용해서 여러번 재활용 할 수 있는 함수를 만드는 과정이 참 재미있었고, 앞으로도 여러개의 기본 함수를 만들어야 할 때에는 이를 활용하면 될 것 같다.

• 참고
  • https://2dowon.github.io/docs/javascript/multiple-arrow-function/
  • https://blog.deercorp.com/next-js-app-router-and-fetch-library/