React 에서 AOS 사용하는 방법

 

AOS는 애니메이션을 쉽게 적용해 주는 라이브러리 중 하나입니다.

기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우,

AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있습니다.
AOS 라이브러리는 자바스크립트를 쓰지 않고도 쉽게 사용하고 적용할 수 있는 장점이 있습니다.

 

근데 문득 그런 의문이 들 수도 있습니다.

' 나는 motion 라이브러리를 사용하고 있는데 굳이 AOS 라이브러리를 사용해야해??'

 

간단하게 설명하자면 페이지가 스크롤 될 때 간단한 애니메이션을 추가하고자 할 때 유용합니다.

motion 라이브러리는 고급 애니메이션 기능을 제공하기 때문에 파일 크기가 aos 라이브러리 보다 크다는 단점도 있죠.

따라서 간단한 스크롤 애니메이션을 구현하게 된다면 aos 라이브러리를 사용하는 것을 추천합니다.

기능
Framer Motion > AOS

파일 크기
AOS > Framer Motion

기본세팅

첫 번째로 npm을 통해 AOS를 설치합니다.
Terminal을 열고 다음의 커맨드를 입력합니다.

npm install aos

 

두 번째로 AOS를 직접 적용을 해주어야 합니다.

import React, { useEffect } from "react";

import AOS from "aos";
import "aos/dist/aos.css";

const Home = () => {

  return (
    <div>
    </div>
  )
}

 

마지막으로 useEffect 함수를 통해 AOS를 초기화를 해줍니다.

import React, { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";

const Home = () => {
  
  useEffect(() => {
    AOS.init();
  },[])
  
  return (
    <div>
      <div data-aos="fade-up"> 나타나라 얍!! </div> // 위에서 div 가 내려옵니다.
    </div>
  )
}

 

 

그 외에 다양한 기능들은 해당 라이브러리 사이트에 가시면 친절하게 설명해 주고 있습니다.

 

https://michalsnik.github.io/aos/