feat: Loading 컴포넌트 구현 #89
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@minkyung00 요거 아직 Draft인가요~? 설명은 이미 완료된 것 같아서 질문드립니다~~ |
newminkyung
requested review from
hjy0951,
deepbig and
Doeunnkimm
as code owners
| export const Lottie = ({ src, loop = true, autoplay = true, ...props }: LottieProps) => { | ||
| const containerRef = useRef<HTMLDivElement>(null); | ||
| const animationRef = useRef<AnimationItem>(); | ||
|
|
||
| useEffect(() => { | ||
| if (!containerRef.current) return; | ||
|
|
||
| animationRef.current = lottie.loadAnimation({ | ||
| container: containerRef.current, | ||
| loop, | ||
| autoplay, | ||
| renderer: 'svg', | ||
| path: src, | ||
| rendererSettings: { | ||
| progressiveLoad: true, | ||
| hideOnTransparent: true, | ||
| }, | ||
| }); | ||
|
|
||
| return () => { | ||
| animationRef.current?.destroy(); | ||
| }; | ||
| }, [autoplay, loop, src]); | ||
|
|
||
| return <div ref={containerRef} {...props} />; | ||
| }; |
There was a problem hiding this comment.
질문이 있습니다!
animationRef를 사용하신 의도가 궁금해요!!
useEffect return시, lottie.detroy()를 사용하면 animationRef를 사용하지 않을 수 있지 않나해서요!
There was a problem hiding this comment.
lottie.destroy()를 사용하면 모든 Lottie 애니메이션이 destroy 됩니다!
여러 애니메이션이 동시에 존재하면 모든 애니메이션이 destory 되기 때문에
ref.current에 각 애니메이션 객체를 담아서 각각 관리하도록 하였습니다~
| @@ -0,0 +1,41 @@ | |||
| 'use client'; | |||
There was a problem hiding this comment.
요기에 use client는 불필요하지 않을까요~~?? atom을 호출하는 feature 또는 상위 함수에서 이미 적용되어 있을 것 같아서요~~
| interface AnimationConfigProps extends Omit<AnimationConfig, 'container'> { | ||
| container?: AnimationConfig['container']; | ||
| } |
There was a problem hiding this comment.
AnimationConfig에서 container를 optional로 받는 이유가 있을까요?
animationRef에서 container를 직접 입력하고 있는데 props으로 container 값을 전달 받으면 의도하지 않은 container가 사용되거나 충돌이 발생하지는 않나요?
잘 몰라서 질문드립니다~~! 구글 검색으로는 해당 방식으로 사용하는 케이스를 찾을 수 없어서요👀
There was a problem hiding this comment.
생각해보니 container를 받을 필요가 없네요! 감사합니다~👍
🤔 해결하려는 문제가 무엇인가요?
🎉 어떻게 해결했나요?
1. Lottie 컴포넌트 구현
Lottie 컴포넌트 스토리북
public/[...path]->/[...path]앞에 public 경로 생략하고 사용하면 됩니다2. Loading 컴포넌트 구현
Loading 컴포넌트 스토리북
bandiboodi-loading.json을 넣은 Loading 컴포넌트를 구현했어요📚 Attachment (Option)