Pre-Loading

export function preloadImage(src = null) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function () {
      resolve(img);
    };
    img.onerror = img.onabort = function () {
      reject(src);
    };
    img.src = src;
  });
}

이미지 파일의 소스링크를 prop으로 받아 img.src에 넣어준 promise 객체를 활용해 사용자의 브라우저에 이미지를 미리 캐싱합니다.

const [preLoadData, setPreLoadData] = useState([]);

  function preloadImages() {
    preLoadData.forEach((ele) => {
      ele.forEach((item) => window.requestIdleCallback(() => preloadImage(item.imgUrl)));
    });
  }

프리로딩할 데이터를 setPreLoadData로 useState에서 관리하며 이 데이터들을 requestIdelCallback() 함수를 사용하여 사용자의 호출을 방해하지 않으며 메인 스레드가 비어있을때 이미지를 프리로딩하는 방식으로 구현하였습니다.

CreatePortal

기존 modal을 띄울때 만든 부모의 위치에 구속되어 위치 조절이 쉽지 않았습니다.

여러 구글링을 통해 createPortal()이라는 함수를 알게되어 적용하였습니다.

prop으로 내용과, 위치를 전달하는 방식으로 사용하는데

function Layout() {
  return (
    <StWrapper>
      <StContainer id={"modal"}>
        <Header />
        <Outlet />
        <Footer />
      </StContainer>
    </StWrapper>
  );
}

위치는 위의 id값으로 저장한 “modal”로 찾은 DOM element로 전달하여 사용합니다.

return createPortal(
    <ModalContainer>
			...
    </ModalContainer>,
    document.getElementById(modalPosition="modal")
  );

createPortal()을 활용하여 Modal의 위치를 자유자재로 선정할 수 있었습니다.