inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

2-6) 컴포넌트 Preloading

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

291

유상원

작성한 질문수 11

1

안녕하세요 ! 강의를 들으면서 실습하다 에러가 나서 질문 올립니다.
 
lazyWithPreload(importFunction){
const Component = React.lazy(importFunction);
Component.preload = importFunction;
return component;
}
 
여기 부분을 똑같이 따라하려고 하는데 component.preload 부분에서
Property 'preload' does not exist on type 'LazyExoticComponent >'
 
이와 같은 에러가 납니다. typescript에서는 위와 같은 형태를 가지지는 못하는건가요?
 
 

react devtools

답변 1

0

유동균

안녕하세요, 유상원님,

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

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

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

 

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

 

0

유상원

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

bundle analyzer 에 대한 질문이 있습니다.

0

119

2

Cannot find module serve 에러

1

127

1

성능 탭에서 소요시간이 안보입니다

0

234

2

이미지 CDN 만드는 방법

0

478

1

Performance FPS 탭이 안보여요.

1

826

1

CPU throttling이 뭔가요?

0

1129

1

default export가 아닌 named export일 때 lazy사용법

1

1082

1

lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다

1

597

1

network 캐싱에 대해서 질문 있습니다!

1

432

1

vue project에서 chrome performance tab 확인하기

1

463

1

node version으로 인한 오류

4

1243

1

강의 자막

1

966

2

번들파일과 병목현상 질문

2

405

1

webpack-bundle-analyzer 질문

1

791

1

이미지 프리로딩 질문

1

391

1

이미지 최적화 활용

1

591

1

강력 새로고침

1

334

1

Suspense 관련해서 질문드립니다

2

367

1

config-overrides cant resolve path

1

369

1

이미지 preload 컴포넌트 preload 차이 질문드립니다.

1

617

1

custom react 환경에서 node_modules chunk 분리

1

385

1

removeSpeical 함수를 줄여야겠다고 하는 이유!

1

295

1

Factory pattern에 대해서 궁금한 점이 있습니다

2

378

2

텍스트 압축 방식에 대해 질문이 있습니다

2

959

1