타이핑 효과 구현

useState와 setInterval을 활용하여 리액트로 타이핑 효과를 구현해보도록 하자!

텍스트 배열과 화면에 보여줄 text, 문자열의 개수를 저장할 count, 배열의 번호를 저장할 line 변수를 선언

 const txt_arr = [
    "텍스트1입니다.",
    "텍스트2입니다.",
    "텍스트3입니다.",
    "텍스트4입니다.",
  ];

  const [text, setText] = useState("");
  const [count, setCount] = useState(0);
  const [line, setLine] = useState(0);

50ms마다 텍스트 문자열의 문자를 하나하나씩 보여주기

1. 보여줄 문자열(line번째 배열의 텍스트)을 변수 txt에 저장
2. 50ms마다 0번부터 문자열의 길이까지 문자 하나하나를 붙여서 text에 저장

useEffect(() => {
    const interval = setInterval(() => {
      let txt = txt_arr[line];
      console.log(txt);
      setText(text + txt[count]);
      setCount(count + 1);
    }, 50);
    if (count === txt_arr[line].length) {
      clearInterval(interval);
    }
    return () => clearInterval(interval);
  });

전체 코드

import { useEffect, useState } from "react";
function RankPage() {
  const txt_arr = [
    "텍스트1입니다.",
    "텍스트2입니다.",
    "텍스트3입니다.",
    "텍스트4입니다.",
  ];

  const [text, setText] = useState("");
  const [count, setCount] = useState(0);
  const [line, setLine] = useState(0);

  const changeScreen = () => {
    setLine((i) => i + 1);
    setText("");
    setCount(0);
  };

  useEffect(() => {
    const interval = setInterval(() => {
      let txt = txt_arr[line];
      setText(text + txt[count]);
      setCount(count + 1);
    }, 50);
    if (count === txt_arr[line].length) {
      clearInterval(interval);
    }
    return () => clearInterval(interval);
  });
  return (
    <div>
      <h2>{text}</h2>
      <button onClick={changeScreen}>다음</button>
    </div>
  );
}