React로 Lottie 애니메이션 구현하기

React로 Lottie 애니메이션을 구현하는 법

오늘은 Lottie 애니메이션을 React 프로젝트에 사용하는 방법을 기록해보겠습니다!
생각보다 간단하니까 차근차근 따라해주세요 😆

https://lottiefiles.com/
lottie에 대해 궁금하신 분들은 링크로 들어가서 Docs나 open source를 보는것도 좋습니다.

Free Lottie Animation Files, Tools & Plugins - LottieFiles

https://lottiefiles.com/blog/working-with-lottie/how-to-use-lottie-in-react-app

How to use Lottie animations in a React App - LottieFiles

 

---

lottie-web 설치하기

npm install lottie-web

위의 명령어대로 lottie-web을 프로젝트 폴더에 설치해주세요.

npm i lottie-web 실행 시 cmd 창

설치가 완료되면 사용할 애니메이션을 고르러 가봅시다.

---

 

Lottie에서 animaiton json 다운로드 받기

lottie 사이트의 Discover 카테고리에서 Free Animations로 들어가면

여러 무료 애니메이션들이 나옵니다. 여기서 원하는 애니메이션을 클릭해주세요.

클릭하면 뜨는 창입니다. 상단의 Download 버튼에서 Lottie JSON을 클릭합니다. 다운로드된 json파일은 우리의 프로젝트 파일안으로 넣어주세요.
파일을 열어보면

이렇게 아주아주 긴 json 파일이 보이게 됩니다. 이 json 파일을 우리는 component안에서 불러올겁니다.

---

 

Component 생성하기

위 사진처럼 animation.jsx 파일을 생성해 Animation 컴포넌트를 만들었습니다.
lottie.loadAnimation 안에서 애니메이션 설정을 해줍니다.

animationData에는 적용할 json파일을 적어줍니다. animationData: require(json파일 상대경로) 형식을 사용해도 무방합니다.
container는 말그대로 애니메이션을 담을 container를 뜻합니다. 저는 div를 컨테이너로 사용했습니다.
loop와 autoplay는 애니메이션을 반복할것인지 여부와 자동 플레이 여부를 나타내는 것입니다.

localhost 서버에서 yarn start로 반영된 사이트의 모습을 확인해보겠습니다.

확인해보면 이렇게

애니메이션이 들어간것을 볼 수 있습니다!

사이트에 생동감을 더할 애니메이션을 삽입하고 싶다면 lottie로 간단하게 구현해보세요. ✨
다들 오늘도 즐코딩하세요 😉
 

도움이 되었다면 하트를 눌러주시면 큰 힘이 됩니다 🩷