[FE] feat : 이미지 스켈레톤 적용 #1055
[FE] feat : 이미지 스켈레톤 적용 #1055
Conversation
- 이미지 컴포넌트를 children으로 받아서, 로드 전에는 스켈레톤을 띄우는 컴포넌트 구현
- 스켈레톤 배경색 변경 - 오타 수정
- 슬라이드 너비에 따라 이미지 사이즈 구하는 훅(useSlideImgSize) 생성 - 슬라이드 이미지 스타일 컴포넌트 분리
| @@ -0,0 +1,38 @@ | |||
| import { useEffect, useState } from 'react'; | |||
There was a problem hiding this comment.
구현 배경
홈 페이지의 경우, 이미지가 퍼센트로 설정되어 있고 768px이하에서 height가 설정되어 있지 않아서 이미지에 따라 자동으로 설정되는 상황이었어요. slideRef로 width를 받아올 수 있어서 캐러셀 이미지 비율을 사용해 height를 지정하는 방식을 사용했어요.
| {React.cloneElement(children, { | ||
| onLoad: handleImgLoad, | ||
| })} |
There was a problem hiding this comment.
지금은 children으로 단일 요소만 받고 있어서 cloneElement를 사용해도 큰 문제가 없을 것 같지만, 몇 가지 우려되는 상황이 있어 코멘트 남겨요!
- children으로 여러 개의 요소가 오는 경우. 즉, 여러 개의 요소를 하나의 스켈레톤 UI로 처리하는 경우. -> 한 페이지에 여러 개의 이미지가 뜨는 경우 각각에 스켈레톤을 적용하는 것이 오히려 전체적인 UI를 해치지는 않을지?
- children에 이미 onLoad 속성이 설정되어 있어 그게 무시되고 ImgWithSkeleton의 onLoad만 적용되는 경우.
위와 같은 상황이 발생할 수 있다면 renderProp 패턴 적용도 제안해봅니다! 바다의 생각이 궁금해요🫠
There was a problem hiding this comment.
한 페이지에 여러 이미지가 있을 경우
비동기로 데이터를 가져왔거나 하나의 이미지라 로딩되었다하더라도 그게 모든 이미지가 로드되었다는 의미는 것은 아니에요. 이미지의 크기, 이미지가 있는 서버의 위치, 캐시 여부에 따라서 이미지의 개별적인 로드 속도는 다르죠.
그래서 여러 사이트에서 이미지 개별로 스켈레톤을 적용하는 것을 볼 수 있을거에요.
리뷰미의 경우, 데이터를 가져오는 동안 로딩 UI를 보여주지만 홈/리뷰 연결 페이지의 이미지 크기가 크기 때문에 캐시가 없을 경우 이미지 로드 속도가 걸리는 상황이에요. 그래서 이미지 개별에 대한 스켈레톤 컴포넌트를 만들었어요. 이미지가 여러개인 홈의 캐러셀의 경우 화면당 하나의 이미지를 보여주고 있고 리뷰미에서 커머스 서비스처럼 여러 이미지가 나오는 페이지는 없기 때문에 fe가 우려하는 상황은 없을 것 같아요.
onLoad
이미지에서 설정한 onLoad와 함께 실행할 수 있도록 변경했어요.
renderProp
만약 스켈레톤 컴포넌트가 이미지가 아니라 다른 요소에 대해서도 적용해야한다면, renderPro 패턴이 유용할 거에요.
다만, 앞서 언급했듯이 이미 로딩 UI가 있고 이미지의 느린 로드 속도에 따른 사용자 불편함을 줄이기 위해 탄생한 이미지용 스켈레톤이라는 점이 구현 시 중요한 포인트였어요. 또한 사용성 측면에서 상황별 스타일링이 커스텀된 이미지에 쉽게 적용할 수 있을 것도 중요한 고려 사항이었어요.
renderProps는 children을 이미지 외의 다른 요소로 받을 수 있는 유연함이 있지만, 스켈레톤 적용 시 사용하는 개발자가 추가로 render 함수에 대한 추가 작업이 필요해요. 하지만 현재 방식은 이미지를 children으로 받지만 하면 돼요. 보다 간단하고 직관적이죠.
또한 함수 컴포넌트가 렌더링될 때 컴포넌트 내부에서 정의된 모든 함수가 새로 생성되기 때문에, 비교적 간단한 이미지 스켈레톤 컴포넌트라는 역할에 비해 불필요한 렌더링이 발생하다는 단점도 존재해요.
There was a problem hiding this comment.
앞으로 기능이 더 확장되더라도 여러 이미지가 나오는 페이지는 없을 것 같네요! 만약 생긴다면 그때 더 고민해도 될 것 같아요.
이미지용 스켈레톤을 구현하게 된 배경 이해했습니다 :) 사용하는 개발자 입장에서는 render 함수를 만들기 보다는 children으로 넣는 것이 더 편하긴 하지요 👍
궁금한 것이, createElement도 새로운 요소를 생성하는 것인데 children으로 온 요소를 한 번 더 렌더링하는 게 아닌가요??
There was a problem hiding this comment.
궁금한 것이, createElement도 새로운 요소를 생성하는 것인데 children으로 온 요소를 한 번 더 렌더링하는 게 아닌가요??
찾아보니, 둘의 렌더링 방식에 차이가 있다고 하네요
-
cloneElement는 React 엘리먼트에 대해 새로운 props를 추가하지만, props가 동일하다면 리렌더링을 방지합니다
-
Render Props 패턴은 부모 컴포넌트의 리렌더링 시 항상 새로운 함수가 생성되어 자식 컴포넌트도 다시 렌더링됩니다.
- 테스트 시, event타입이 any로 명시되어서 오류가 나는 것으로 추측 -> 타입을 명시해 오류 해결
🚀 어떤 기능을 구현했나요 ?
이미지 사이즈
이미지에 대한 자유로운 스타일링과 기존에 사용된 이미지에 적용을 위해, children으로 이미지를 받아오도록 했어요.
다만, 스켈레톤이 화면에 제대로 표시되기 위해 이미지 로드되기 전부터 해당 이미지 사이즈가 필요했어요. 그래서 width, height를 사이즈로 받아오도록 했어요.
🔥 어떻게 해결했나요 ?
홈 페이지 캐러셀에 스켈레톤 적용 화면
-.mov
리뷰 연결 페이지에 스켈레톤 적용 화면
-.mov
📝 어떤 부분에 집중해서 리뷰해야 할까요?
스켈레톤 디자인
사전에 디자인 회의가 없어서, 제가 임의로 스타일링 했어요. 이에 대한 팀원들 의견이 궁금해요.
📚 참고 자료, 할 말