AOS 라이브러리 사용법(리액트 + 타입스크립트)

홈페이지 개인 프로젝트를 하던 중 갑자기 옛날에 봤던 사용자 스크롤에 맞춰 나타나고 없어지는 css를 봤던 기억이 났다.

나도 해봐야지 하면서 구글링을 하며 쌩으로 만들어보려고 하던 찰나에
https://all-dev-kang.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%97%90-%EC%97%B0%EB%8F%99%EB%90%98%EB%8A%94-fade-in-fade-out-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0
이 글에서 오픈소스 aos 라이브러리가 존재한다는 사실을 알아냈다.
https://github.com/michalsnik/aos <- aos

이 프로젝트 만들면서 css쪽은 부트스트랩 제외하곤 전부 손으로 만들었기에 이번엔 외부 라이브러리를 한번 써보자 생각했고 바로 실행으로 옮겼다.

Readme에는 html, javascript 기준으로 설명이 되어 있으나 나는 리액트+ts를 사용하고 있기에 이 기준점에 맞춰서 설명글을 적어보겠다.

우선 설치이다

aos 라이브러리를 설치하기 위해선 npm install aos 혹은 yarn add aos 를 이용해 설치해야 하지만 찾아보니 타입스크립트에선 다른 방법이 있었다.
npm install --save-dev @types/aos 혹은 yarn add --dev @types/aos <- 이 구문을 이용해야 AOS의 TypeScript 타입 정의를 가져올 수 있다.
나는 npm install --save-dev @types/aos를 이용했다.
(npm install aos 를 이용할 시 뒤에 index.tsx에서 타입에러가 남 ! )

두번째로 tsconfig설정이다

TypeScript 설정 파일 (tsconfig.json)을 확인하고 compilerOptions 내의 typeRoots와 types 옵션을 확인하여 타입 선언 파일이 제대로 로드되고 있는지 확인해야한다.

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "types": ["aos"]
  }
}

이게 npm install --save-dev @types/aos 를 하면 자동으로 설정이 되는건지 안되는건지 모르겠지만 우선 나는 설정이 안되어 있었기에 직접 넣어줬다.

세번째로 index.tsx설정이다

import App from './App';
import 'aos/dist/aos.css';
import AOS from 'aos';
AOS.init();

AOS를 사용하기 위해 앱의 진입 지점인 src/index.tsx 파일에서 초기화 코드를 작성하고 AOS 스타일을 로드하면 된다.
이렇게 되면 사전작업(?)은 끝이다.

마지막으로 컴포넌트에서 사용이다

우선 나는 styledcomponent를 사용해 css 작업을 하였기 때문에

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

function YourComponent() {
  useEffect(() => {
    AOS.init();
  }, []);

이 코드 중에서 import './YourComponent.css'; 대신 import styled from "styled-components"; 를 사용했다.(스타일드 컴포넌트 혹은 이모션을 이용해보면 이해가 바로 될것)
이렇게 되면 바로 사용을 할 수 있다.
간단하게 fade-in 효과를 원하는 div가 있다면 <div data-aos="fade-in"> 이라고 클래스를 넣어주면 바로 fade-in 효과가 적용이 된다.
aos github Readme에 적힌것처럼

<div
  data-aos="fade-up"
  data-aos-offset="200"
  data-aos-delay="50"
  data-aos-duration="1000"
  data-aos-easing="ease-in-out"
  data-aos-mirror="true"
  data-aos-once="false"
  data-aos-anchor-placement="top-center"

</div>

이런식으로 속성을 조정할 수도 있다.