component.preload = importFunction 관... - 인프런

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

2-6) 컴포넌트 Preloading

component.preload = importFunction 관련 질문 드립니다.

작성

276

안녕하세요 ! 강의를 들으면서 실습하다 에러가 나서 질문 올립니다.

lazyWithPreload(importFunction){

const Component = React.lazy(importFunction);

Component.preload = importFunction;

return component;

}

여기 부분을 똑같이 따라하려고 하는데 component.preload 부분에서

Property 'preload' does not exist on type 'LazyExoticComponent >'

이와 같은 에러가 납니다. typescript에서는 위와 같은 형태를 가지지는 못하는건가요? 

답변 1

지식공유자

안녕하세요, 유상원님,

타입스크립트에서 컴포넌트에 preload 속성을 추가하는 부분을 질문주셨는데요,

기본적으로 컴포넌트 타입에는 preload라는 속성이 없기 때문에 타입스크립트에서는 에러나는 것이 정상입니다.
이 때 해결방법으로는 직접 커스텀 타입을 정의하여 넣어줘야 되는데요, 다음과 같이 작성할 수 있습니다.

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

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

질문자

와우,,, 엄청나게 빠른 답변 감사합니다. 좋은 강의 너무 감사합니다.