[react-typist] React 18 이상에서 호환 안 되는 문제

라이브러리 이슈

 

react-typist로 타이핑 애니메이션을 만족스럽게 구현한 직후, 콘솔창에서 아래와 같은 노란 경고창을 확인했다.

 

타이핑 애니메이션은 이런 효과이다.

 

Warning: componentWillReceiveProps has been renamed, and is not recommened for use ... 

 

 

문제는 위의 라이브러리가 React 18에서 의도한 기능 구현이 제대로 되지 않는 것이었고,

역시나 해당 라이브러리 깃헙 이슈에도 관련 내용이 이미 2022년부터 있었다.

 

흐름을 보니 더 이상 업데이트가 활발하게 진행되지 않아 모인 유저들은 다 각기 다른 라이브러리를 찾아 떠나는 중이었다.. ㅋㅋ 

 

 

라이브러리 교체

 

이후 나도 어느정도 검증되어 있는 또 다른 라이브러리인 React Simple Typewriter로 라이브러리를 교체했고

효과는 동일하게 구현되었다. 

 

 

사용법은 아래와 같이 간단하다.

 

 

 

나중에 나처럼 삽질을 할 수도 있는 잠재적인 사람들에게 조금이나마 도움이 되고자 

해당 라이브러리 이슈 글에 답글을 달아두었다.

 

 

라이브러리 구현 결과 비교

 

효과는 정말 거의 동일하다.

옵션에 따라서 구현 움직임이 많이 달라지니까, 문서를 정독하면 될 일이다.

 

react-typist

react-simple-typewriter

 

react-simple-typewriter 코드

// 'react-simple-typewriter' code
import { useTypewriter, Cursor } from "react-simple-typewriter";
.
.

  const [text] = useTypewriter({
    words: ['sleepy', 'hungry', 'happy'],
  })


   <div>
     I am
      <div>
        {text}                  
        <Cursor cursorColor='black' />
      </div>
    </div>