[react][react-modal][typeScript] react-modal typeScript 환경에서 style 적용하기

나는 모달을 띄울 때 react-modal 라이브러리를 사용한다.

https://reactcommunity.org/react-modal/

react-modal documentation

react-modal typescript용 install

npm install --save @types/react-modal

 

react, javascript 환경일 때에는 아무문제 없던 react-modal을 

react, typescript 환경에서 적용하려니 자꾸 오류가 났다.... 

 

회사에서 해결못하고 결국 퇴근했는데 집에와서 이것저것 만져보니 해결됐다!!

 

무슨오류나면 Modal에 style 속성줄 때 자꾸 type에러가 났다.

No overload matches this call. Overload 1 of 2, '(props: Props | Readonly<Props>): ReactModal', gave the following error. Type '{ overlay: { position: string; zIndex: number; top: number; left: number; width: string; height: string; backgroundColor: string; display: string; alignItems: string; justifyContent: string; }; content: { ...; }; }' is not assignable to type 'Styles'.

react, javascript 환경일 때에는 아무문제 없었는데 분명....... 왜 이런 오류가....

구글에도 react-modal typescript style 검색해봤는데 답이 없었다,,

 

<Container>
  <button type="button" onClick={openModal}>
    modal
  </button>

  <Modal
    isOpen={isOpenModal}
    onRequestClose={closeModal}
    ariaHideApp={false}
    style={modalStyle}
  >
    <SmsModal closeModal={closeModal} />
  </Modal>
</Container>

Modal의 style에 전달해준 modalStyle은 이렇게 생겼다.

const modalStyle = {
  overlay: {
    position: "fixed",
    zIndex: 1020,
    top: 0,
    left: 0,
    width: "100vw",
    height: "100vh",
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  content: {
    position: "relative",
    width: "568px",
    height: "590px",
    maxWidth: "calc(100vw - 2rem)",
    maxHeight: "calc(100vh - 2rem)",
    backgroundColor: "#FFFFFF",
    borderRadius: "4px",
    border: "0px",
    padding: "0px",
    overflowY: "auto",
  },
};

 

modalStyle에 type을 주라는 거 같은데 무슨타입을 줘야할까?... 고민하다가 

@types/react-modal을 install 했으니 이걸 파고 들어가면 찾을 수 있을 것 같았다.

그래서 vscode에서 Modal의 index.d.ts를 들어가보니

각 속성에 대한 타입들이 정의되어 있었고

Styles에 content, overlat가 있으니 style속성에 대한 타입은 Styles인 것 같았다.

그래서 modalStyle에 ReactModal.Styles 타입을 주니 드디어 타입오류를 해결할 수 있었다.

 

- 해결 코드

const modalStyle: ReactModal.Styles = {
  overlay: {
    position: "fixed",
    zIndex: 1020,
    top: 0,
    left: 0,
    width: "100vw",
    height: "100vh",
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  content: {
    position: "relative",
    width: "568px",
    height: "590px",
    maxWidth: "calc(100vw - 2rem)",
    maxHeight: "calc(100vh - 2rem)",
    backgroundColor: "#FFFFFF",
    borderRadius: "4px",
    border: "0px",
    padding: "0px",
    overflowY: "auto",
  },
};

 

오늘 이 오류를 해결하면서 타입스크립트를 더 알게된 거 같다.

이래서 라이브러리마다 타입스크립트용을 따로 install하는 것이고 여기서 type을 참고하는 것임을 깨달았다!!

정말 정말 큰 수확이다! 

 

앞으로 타입스크립트를 더 잘 할 수 있을 것 같아 뿌듯하다 : )