Preload Components 관련 질문입니다.

Question

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 
- 먼저 유사한 질문이 있었는지 검색해보세요. 
- 서로 예의를 지키며 존중하는 문화를 만들어가요. 
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요! 좋은 강의 감사합니다. 

function lazyWithPreload(factory) {
  const Component = React.lazy(factory);
  Component.preload = factory;
  return Component;
}

혹시 이 코드를 typescript로 바꾸려면 어떻게 해야 할까요? 코드를 이런식으로 바꿨는데 Component에는 preload 속성이 없네요 ㅜㅜ

function lazyWithPreload(
  factory: () => Promise<{
    default: React.ComponentType<any>;
  }>
) {
  const Component = React.lazy(factory);
  Component.preload = factory;
  return Component;
}

Answer

안녕하세요, 금교영님,

typescript로 구현을 하실 때는 컴포넌트의 타입을 직접 type casting을 하거나 다음과 같이 커스텀 컴포넌트 타입을 만들어서 사용하셔야 할 것 같습니다.

interface PreloadComponent extends React.LazyExoticComponent<React.ComponentType<any>> {
 preload?: any;
}

답변이 도움되셨기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

금교영

Preload Components 관련 질문입니다.

이 글과 비슷한 Q&A

react useState 실행순서에 대해서 질문드립니다.

3-4 db sqlite3 파일 질문입니다22

클래스 설명시 음성 OFF

prefetchQuery 관련 질문