글자 타이핑 이벤트

타이핑 효과는 크게 두 부분으로 나눌 수 있어:

1. 상태 관리 (typedText)

const [typedText, setTypedText] = useState("");
const fullText = "신선한 농산물을 만나보세요";

• typedText: 화면에 지금까지 “찍힌” 글자들을 저장하는 상태야.

• fullText: 최종에 보여주고 싶은 전체 문구.

 

초기엔 typedText가 빈 문자열(””)이라서 아무것도 안 보이는 상태야.

 

2. useEffect로 하나씩 글자 추가하기

useEffect(() => {
  if (typedText.length < fullText.length) {
    const timeout = setTimeout(() => {
      setTypedText(fullText.slice(0, typedText.length + 1));
    }, 100);
    return () => clearTimeout(timeout);
  }
}, [typedText, fullText]);

동작 원리

1. 의존성 배열

• [typedText, fullText]를 줘서 typedText가 바뀔 때마다 이 효과가 다시 실행돼.

2. 조건문 (if)

• typedText.length < fullText.length인 동안만 타이핑을 계속해.

• 이미 전체 글자를 다 찍었으면 더 이상 타이머를 만들지 않아서 무한 반복이 안 됨.

3. setTimeout으로 지연 주기

• 100ms(0.1초) 뒤에 콜백이 실행돼.

• 콜백 안에서 setTypedText를 호출해서,

fullText.slice(0, typedText.length + 1) 만큼의 문자열로 상태를 업데이트해.

4. 글자 하나씩 늘리기

• 예를 들어, typedText가 "신선한 " (길이 4)라면

fullText.slice(0, 5)인 "신선한 농"으로 바뀌는 식이야.

• 이 과정을 반복하면 100ms마다 글자가 하나씩 추가되는 효과가 생겨.

5. 정리 함수 (return)

• 컴포넌트가 언마운트되거나 typedText 변경으로 이 useEffect가 재실행되기 전에

이전 타이머를 clearTimeout으로 꼭 지워줘.

• 안 지우면 중복 실행돼서 오동작할 수 있어.

 

 

추가 포인트

• typedText가 바뀔 때마다 렌더링이 다시 일어나고, 그 렌더링 결과로 화면에 새로운 글자가 보여져.

• 속도를 조절하고 싶으면 100ms 대신 다른 숫자로 바꿔봐. 예: 50ms면 더 빠르게, 200ms면 더 느리게.