[React] react-simple-typewriter로 타이핑 효과 쉽게 구현하기

 

안녕하세요 오늘은 리액트의 react-simple-typewriter 컴포넌트를 사용해 

텍스트가 자동 타이핑 되는 효과를 구현해보도록 하겠습니다 

 

아래 react-simple-typewriter 홈페이지에서 자세한 정보를 확인할 수 있습니다. 

 

react-simple-typewriter

 

 

 

1. react-simple-typewriter 설치하기 

프로젝트 루트 디렉토리에서 아래 명령어를 입력합니다. 

npm install react-simple-typewriter

 

 

2. 타이핑 효과를 넣고자 하는 텍스트 태그 내부에 <Typewriter> 태그를 추가합니다. 

 <h2 className="text-5xl font-bold text-gray-900 mb-4">
        <Typewriter
          words={["Hi, I'm OOO 👋", "저는 리액트 개발자 입니다"]}
          loop={true}
          cursor={true}
          cursorStyle="|"
          typeSpeed={70}
          deleteSpeed={50}
          delaySpeed={2000}
        />
      </h2>

 

import 도  꼭 해줍니다. 

loop = true 를 해줘야 타이핑 효과가 반복되어 나타납니다

 

 

결과 화면입니다.