문제의 시작
최근 축구 api를 활용해서 테이블, 일정, 게시판CRUD, 회원가입, 로그인 등을 목표로한 프로젝트를 시작했다. 아직 초반 단계이지만 gpt와 구글링의 힘으로 해보지도 않은 백엔드와 프론트엔드를 동시에 진행하고 있다. 그러던 중 테이블의 팀 이미지를 렌더링함에 있어서 만족스럽지 않은 속도를 발견했다. 버튼을 누를 때 마다 테이블이 보여주는 리그가 바뀌는데 그에 따른 팀들이 휙휙 바뀌어야 하는데 한 박자씩 밀리는게 눈에 보일정도,,,
ChatGPT에게 물어보자
gpt의 성능이 정말 좋다. 질문만 명확하다면 해결방법 찾는게 구글링보다 빠르다! 일단 gpt가 알려준 방법은 몇개 있다.
일단 React.memo는 처음 본지라 useMemo랑 같은건가? 하고 검색해 봤더니
그렇다. 특정 함수의 계산 값을 메모이제이션해서 다시 재사용 하는 useMemo와는 다르게 컴포넌트 자체를 래핑해서 props에 값이 바뀔 때만 렌더링 해준다더라.
그 다음 이미지 크기는 작아서 괜찮을 것 같아 넘기고 로딩순서는 크게 상관 없다. 어차피 테이블의 팀 이미지가 순서 상관없이 나와야하니까. 플레이스홀더는 로딩중엔 로딩 circular를 띄워 두었으니 필요없고 남은건 이미지 프리로딩?이다. 사실 이거부터 해봤어야 했는데 저 React.memo에 눈이멀어 뒤에서 부터 하나씩 해봤다.
Image Preloading
Image Preloading 이란 사용자의 요청이 들어오기 전에 이미지를 미리 로드해 캐시로 이미지를 바로 가져오는 방식이라고한다. 미리 캐싱해두어 빠릿빠릿하게 이미지 전환하는데에 도움이 된다고한다.
프리 로딩 결과
const preLoadImage = (url: string) => {
const img = new Image();
img.src = url;
};
preLoadingImage(대충 url)
<img src={대충 url}/>이렇게 이미지를 사전에 로드하는 함수를 만들어두고 api로 받아온 url을 데이터 전처리할때 하나씩 먹여준것만으로 눈에 띄게 로딩 속도가 바뀌었다. 실제로 테이블에서 리그를 바꿀 때 마다 휙휙 바뀌는게 크게 체감이 된다. 그리고 저 new Image()의 인자로는 width, height가 들어간다 위에서 gpt가 알려준 이미지 크기 최적화도 저기서 하면 될거같다.
출처: https://react.dev/reference/react/memo
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
