리액트에서 setInterval을 사용하여 타이핑 효과 주기

리액트에서 타이핑 효과를 주고 싶어 알아 보았더니 react-typing-effect과 같은 여러 라이브러리가 있었는데, 

저는 좀 더 인공지능 스피커가 말하는 느낌을 주고 싶기도 했고, 

구현하기 어렵지 않을 것 같아서 만들어 보았습니다. 

 

기능

1. 뿌릴 텍스트 준비 

2. 뿌릴 텍스트 (state)

3. 텍스트 길이 체크 (state)

 

import React, { useState, useEffect } from 'react'

const TypingText = () => {
  const txt = "오늘은 뭐 먹지?";
  const [Text, setText] = useState('');
  const [Count, setCount] = useState(0);
  
  return (
  	<p className="text" >{ Text }</p>
  )
}

export default TypingText

 

render 되자 마자 Text state 안에 text 의 문자열을 하나씩 setState 하였습니다. 

문자열 길이는 Text.length로 비교해도 상관 없지만, 저는 Count state를 따로 두었습니다.

useEffect(() => {
    const interval = setInterval(() => {
        setText(Text + txt[Count]); // 이전 set한 문자 + 다음 문자
        setCount(Count + 1); // 개수 만큼 체크 
    }, 100);
    if(Count === txt.length)  {  // Count를 따로 두지 않고 Text.length 체크도 가능
        clearInterval(interval); // 문자열 체크를 통해 setInterval을 해제합니다
    }
    return () => clearInterval(interval); // 언마운트시 setInterval을 해제합니다
})

 

결과

적용된 화면

clear 하는 시점이 글자를 모두 출력한 시점이므로,

이후 액션 처리도 쉽게 할 수 있습니다. 

 

{ ... }
const [Color, setColor] = useState('black');

const handleAfterAction = () => {
  setColor('orange');
}


useEffect(() => {
  { ... }
  if (Text.length === txt.length) {
  	clearInterval(interval);
  	handleAfterAction(); // 글자가 모두 출력된 후 handleAfterAction 함수를 호출합니다.
  }
  return () => clearInterval(interval);
});

return (
  <div className="App">
    <p className="text" style={{color: Color}}>{Text}</p>
  </div>
);

결과

적용된 화면