[React] setTimeout으로 글씨 하나씩 등장시키기

타이머 생성

setTimeout() => {

}, 1000);

 

 

: 1초 후에 실행

 

 

 

타이머 지우기

clearTimeout();

 

 

글씨 하나씩 등장시키기

 const [displayIntro, setDisplayIntro] = useState("");
 const [introIdx, setIntroIdx] = useState(0);
 const intro = "Hello! I'm Eunjin.";
  
  
 useEffect(() => {
    if (introIdx < intro.length) {
      const timer = setTimeout(() => {
        setDisplayIntro(intro1.substring(0, introIdx + 1));
        setIntroIdx(introIdx + 1);
      }, 130);
      return () => clearTimeout(timer);
    }
  }, [introIdx, intro]);


  return (
      <h1>{displayIntro}</h1>
  );

index값을 1씩 증가시켜서

보여줄 displayIntro에 내가 쓴 글 intro의 한자한자씩 추가해주면 됩니다!

useEffect를 사용해서 introIdx와 intro가 수정될때마다 반복 실행될 수 있도록 합니다!

 

 

useEffect( () => {실행문}, [a, b]);

a, b가 업데이트 될 때마다 실행됩니다.