[React] 리액트에서 조건에 따라 동적 import하기

같은 모달을 수정/ 등록 할 때 같이 쓰고 있기 때문에 어떻게 통신을 할까, 모드에 따라 해야할 것 같은데 따로 빼는게 좋을까 아님 두개 다 불러오고 해야하는걸까 이리 저리 고민을 많이 했다. 그러다가 동적 임포트가 기억이 났고 검색을 통해 커스텀 훅을 구현하였다.

처음에는 React.lazy도 컴포넌트를 동적으로 import를 할 수 있다고 해서 검색해 보다가 컴포넌트만 적용되는 듯 하고(정확하진 않음), export default만 가능하다고 해서  다른 방법을 찾아봤다.

import()는 promise로 반환된다고 해서 아래와 같이 async 함수 내에서 await 처리하였다.

 

 

모드(얘도 다른 훅에서 받아온다)가 변경될 때 동적으로 원하는 모듈을 임포트 할수 있도록 했다

import { RequestDocument } from 'graphql-request';
import { useState, useEffect } from 'react';

const useDynamicImport = (mode: string) => {
  const [query, setquery] = useState<RequestDocument>('');
  const dynamicImport = async (mode: string) => {
    if (mode === 'edit') {
      await import('../graphql/lists').then((query) => setquery(query.PUT_ITEM));
    } else {
      await import('../graphql/lists').then((query) => setquery(query.POST_ITEM));
    }
    // 여기서는 쿼리가 다 다르기 때문에 이런식으로 임포트를 해야했지만, 
    //기존의 rest api인 경우는 그냥 method, url만 변경하는 방식으로 하면 될 것 같다
    // graphql도 그냥 여기에 변수선언하고 할당하면 될지두?
  };

  useEffect(() => {
    if (mode) {
      dynamicImport(mode);
      // TODO: eslint에 맞게 고치기
    }
  }, [mode]);// 모드값이 변할 때 마다 dynamicImport 함수 실행

  return query;
};

export default useDynamicImport;

ps. 아직 eslint에러는 고치지 못했다

------

참고 자료

동적으로 모듈 가져오기

https://ko.javascript.info/modules-dynamic-imports

동적으로 모듈 가져오기

리액트에서 컴포넌트 동적 임포트하기

https://reactjs.org/docs/code-splitting.html#reactlazy

Code-Splitting – React