[JS] 타이핑 애니메이션

위와 같이 지정된 문자열이 한 글자씩 추가되는 기능을 만들어보겠습니다.

---

const text = "저의 포트폴리오에 오신걸\n 환영합니다!";
const [displayText, setDisplayText] = useState('');

useEffect(() => {
	let currentIndex = 0;
  	const textLength = text.length;

  	const intervalId = setInterval(() => {
    	if (currentIndex <= textLength) {
        	setDisplayText(text.substring(0, currentIndex));
      		currentIndex++;
        } else {
        	clearInterval(intervalId);
        }
    }, 80);

	return () => clearInterval(intervalId);
}, []);

• setInterval을 이용해 80ms마다 currentIndex의 값이 1씩 추가되어 substring()으로 문자열이 잘리는 길이가 한 글자씩 늘어나는 코드입니다.

• 문자열의 className이 text입니다.
• ::after을 이용하여 문자열 뒤에 커서를 표시하였습니다.
• opacity를 이용한 animation을 넣어 깜빡이는 커서를 구현하였습니다.