React 스플래시 페이지 애니메이션 적용하기

 

라이브러리와 css를 적용하지 않고 '단어'에 대한 애니메이션을 적용하려면 어떻게 해야할까?

 

시간을 가지고 단어를 렌더링하면 될 것이다.

 

다음과 같은 wodrs가 존재한다고 가정해보자 

const words = '당신의 운동 파트너🏃‍♂️'.split(' ');

 

각 wods는 ' ' 공백을 기준으로 나눌  수 있다.

그러면 words에는 [당신의,운동,파트너🏃‍♂️]가 저장될 것이다.

 

각 단어의 인덱스를 나타내는 State를 선언하고,

const [showWordIndex, setShowWordIndex] = useState(0);

 

useEffect를 사용하고 싶지 않지만(버그 발생의 주된 녀석), 

메모리 누수 방지 등에서 이득이 있어 사용했다.

  useEffect(() => {
    const timer = setTimeout(() => {
      if (showWordIndex < words.length - 1) {
        setShowWordIndex(showWordIndex + 1);
      }
    }, 1000);
     return () => clearTimeout(timer);
  }, [showWordIndex, words.length]); //의존성 배열, 이 안의 값들이 변경될 때 마다 useEffect 실행됨

 

이제 단어를 출력하는 코드를 작성한다.

<h1 className="text-2xl font-bold">
    {words.slice(0, showWordIndex + 1).map((word, index) => (
      <span
        key={index}
        className={`fade-in ${index === showWordIndex ? 'active' : ''}`}
      >
        {word}
        {index < showWordIndex ? ' ' : ''}
      </span>
    ))}
</h1>

 

fade-in을 이용하여 나타나도록 하였다.

 

결과화면은 다음과 같다.

WeFit - Chrome 2025-01-02 16-06-27.mp4

2.30MB

 

하지만 권장하는 스플래시 페이지의 라이프타임은 1~3초이고,

실제로 많은 앱 화면에서는 애니메이션 자체가 없었다!

 

따라서.. 우리 팀도 애니메이션을 제거하고, 스플래시 페이지 자체를 1초만 출력하게끔 하였다.