컴포넌트의 렌더링 후 이미지를 로딩하면 위 영상처럼 이미지 로딩 시간으로 인해 사용감이 떨어집니다.
이를 해결하기 위해 나중에 사용할 이미지를 미리 불러오는 작업이 가능합니다.
이미지를 불러오는 역할을 하는 컴포넌트를 만들어 최상위 컴포넌트에 넣어주기만 하면 됩니다.
이런 방식을 이용하여 프리로딩이 되는 이유는 브라우저 캐싱 때문입니다.
이미 불러왔던 이미지는 캐시에 저장되기 때문에 나중에 같은 경로로 이미지를 불러오려고 할 때 서버가 아닌 캐시에서 불러오기 때문에 속도가 향상되는 것입니다.
※ 주의사항
- 너무 많은 프리로딩은 네트워크에 부담을 줄 수 있으니 꼭 필요한 이미지만 사용할 것.
return null;을 이용하여 해당 컴포넌트가 렌더링이 필요한 컴포넌트가 아님을 명시할 것.
2번은 필수는 아니지만 return null;을 사용해도 useEffect등은 오류없이 실행되며 해당 컴포넌트의 역할을 코드만 봐도 바로 파악이 가능하므로 사용하는 것이 좋습니다.
프리로딩을 사용한 모습입니다. 위와 비교했을 때 눈에 띄게 빨라진 것을 볼 수 있습니다.
