이게 무슨 일이야!

React 에서 lottie 사용하기 본문

프론트엔드 개발/React

React 에서 lottie 사용하기

명동섞어찌개 2022. 11. 1. 09:24

Lottie 를 사용하면

가벼운 json 파일로 높은 퀄리티의 웹 애니메이션을 웹상에서 보여줄 수 있다 

(같은 정도의 애니메이션을 gif 로 보여주려면 용량이 10배는 더 나감)

 

간단하게 리액트에서 lottie 로 로딩바 보여주는 방법을 안내하자면

 

1. 아래 사이트에서 원하는 모션을 다운받는다

(직접 만드는건 Adobe AfterEffect 에서 bodymovin 플러그인을 쓰면 되는데 일단 간단한 방법부터 )

 

https://lottiefiles.com/featured

 

Featured animations from our community

Featured collection of Free Lottie Animations created with Bodymovin.

lottiefiles.com

 

 

 

2. 아래 라이브러리 설치

https://www.npmjs.com/package/@lottiefiles/react-lottie-player

 

@lottiefiles/react-lottie-player

Lottie web player wrapper for React. Latest version: 3.4.7, last published: 6 months ago. Start using @lottiefiles/react-lottie-player in your project by running `npm i @lottiefiles/react-lottie-player`. There are 49 other projects in the npm registry usin

www.npmjs.com

 

 

 

3. 이 플레이어를 리액트에 붙인다

https://codesandbox.io/s/react-18-lottie-player-forked-8n2ybt?file=/src/App.js:57-89 

 

react-18 lottie-player (forked) - CodeSandbox

react-18 lottie-player (forked) by theashraf using @lottiefiles/react-lottie-player, react, react-dom, react-scripts

codesandbox.io

 

'프론트엔드 개발 > React' 카테고리의 다른 글

port 가 다른 두 React SPA 사이에서 localStorage, cookie 공유하기  (0) 2022.11.21
React 에서 무한 스크롤 구현  (0) 2022.11.01
CRA 에서 환경변수 파일명 변경하기  (0) 2022.09.29
RTK Query 인증  (0) 2022.09.26
프로젝트에 RTK Query 적용하기 - 1  (1) 2022.09.25
'프론트엔드 개발/React' Related Articles more
Comments