[React] React에서 AI 타이핑 효과 구현하기 | setInterval의 함정과 해결법

🤔 이 글을 쓰게 된 이유

AI 채팅 서비스를 개발하면서 ChatGPT처럼 텍스트가 한 글자씩 타이핑되는 효과를 구현해야 했습니다.

"그냥 setInterval로 글자 하나씩 추가하면 되겠지?"라고 생각했었는데요... 언뜻 간단해 보이는 기능이었지만, 실제로는 React의 렌더링 사이클과 비동기 타이머가 만나면서 예상치 못한 문제들이 속출했습니다.

가장 당황스러웠던 것은 API 응답은 정상적으로 받아오고, 상태 업데이트도 올바르게 작동하는데 화면에는 아무것도 표시되지 않는 현상이었습니다. 개발자 도구에서는 모든 것이 정상인데 UI만 멈춰있는 상황... 정말 멘붕.

이 과정에서 겪었던 삽질과 깨달음을 공유합니다. 같은 고민을 하고 계신 분들께 도움이 되었으면 합니다.

---

🚫 처음 작성한 문제투성이 코드

첫 번째 시도에서 만든 useTypewriter 훅은 이랬습니다:

// ❌ 문제가 있던 초기 버전
export const useTypewriter = ({ 
  text, 
  speed = 30, 
  onComplete 
}: UseTypewriterProps) => {
  const [displayedText, setDisplayedText] = useState('');
  const [isTyping, setIsTyping] = useState(false);
  const timerRef = useRef<NodeJS.Timeout | null>(null);
  const processedTextRef = useRef<string>('');

  useEffect(() => {
    // 같은 텍스트면 다시 처리하지 않음
    if (processedTextRef.current === text) {
      return;
    }

    if (!text) {
      setDisplayedText('');
      processedTextRef.current = '';
      return;
    }

    // 이전 타이머 정리
    if (timerRef.current) {
      clearInterval(timerRef.current);
    }

    processedTextRef.current = text;
    setIsTyping(true);
    setDisplayedText('');

    let index = 0;
    timerRef.current = setInterval(() => {
      if (index < text.length) {
        setDisplayedText(text.substring(0, index + 1));
        index++;
      } else {
        setIsTyping(false);
        clearInterval(timerRef.current!);
        onComplete?.();
      }
    }, speed);

    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  }, [text, speed, onComplete]); // ⚠️ 여기가 문제의 핵심!

  return { displayedText, isTyping };
};

겉으로는 그럴듯해 보이지만 실제로는 동작하지 않는 코드였습니다.

---

🔍 무엇이 잘못되었을까?

1. 의존성 배열의 함정

}, [text, speed, onComplete]); // ❌ onComplete이 문제

onComplete 함수가 부모 컴포넌트에서 매번 새로 생성되어 useEffect가 불필요하게 재실행됩니다. React에서는 함수도 객체이기 때문에 매 렌더링마다 새로운 참조값을 가지게 되죠.

// 부모 컴포넌트에서 이렇게 사용하면...
<TypewriterComponent 
  text={aiResponse}
  onComplete={() => console.log('완료!')} // 매번 새 함수!
/>

2. setInterval과 React 상태의 미묘한 충돌

let index = 0;
timerRef.current = setInterval(() => {
  setDisplayedText(text.substring(0, index + 1));
  index++; // 클로저 내에서 변수 변경
}, speed);

setInterval 내부의 클로저에서 index 변수를 직접 조작하면서 React의 상태 업데이트와 타이밍 이슈가 발생합니다. 특히 빠른 속도로 상태 업데이트가 일어날 때 렌더링이 밀리는 현상이 나타납니다.

3. 복잡한 Ref 관리

const timerRef = useRef<NodeJS.Timeout | null>(null);
const processedTextRef = useRef<string>('');

두 개의 ref로 타이머와 중복 실행을 관리하다 보니 코드가 복잡해지고 예측하기 어려워졌습니다. React의 선언적 특성과 맞지 않는 명령형 코드가 되어버린 것이죠.

---

✅ 문제를 해결한 새로운 접근법

고민 끝에 완전히 다른 방식으로 재작성했습니다:

// ✅ 깔끔하게 해결된 버전
export const useTypewriter = ({ 
  text, 
  speed = 30, 
  onComplete 
}: UseTypewriterProps) => {
  const [displayedText, setDisplayedText] = useState('');
  const [isTyping, setIsTyping] = useState(false);

  useEffect(() => {
    if (!text) {
      setDisplayedText('');
      setIsTyping(false);
      return;
    }

    setDisplayedText('');
    setIsTyping(true);

    let currentIndex = 0;

    const typeCharacter = () => {
      if (currentIndex < text.length) {
        // 현재 글자까지 표시
        setDisplayedText(text.substring(0, currentIndex + 1));
        currentIndex++;
        // 다음 글자를 위한 재귀 호출
        setTimeout(typeCharacter, speed);
      } else {
        // 타이핑 완료
        setIsTyping(false);
        onComplete?.();
      }
    };

    // 첫 글자부터 시작
    setTimeout(typeCharacter, speed);
    
  }, [text, speed]); // onComplete 제거!

  return { displayedText, isTyping };
};

이게 끝입니다! useRef도 없고, 복잡한 조건문도 없고, 훨씬 간단하죠?

---

🎯 핵심 개선 포인트

1. setTimeout 재귀 방식으로 전환

const typeCharacter = () => {
  if (currentIndex < text.length) {
    setDisplayedText(text.substring(0, currentIndex + 1));
    currentIndex++;
    setTimeout(typeCharacter, speed); // 🎯 재귀 호출
  } else {
    setIsTyping(false);
    onComplete?.();
  }
};

왜 setTimeout 재귀가 더 좋을까?

setInterval의 문제점:

• 브라우저가 백그라운드에서 interval을 throttling함
• React 상태 업데이트와 타이밍이 안 맞음
• 정확한 간격 보장이 어려움

setTimeout 재귀의 장점:

• 각 실행이 완전히 독립적
• 상태 업데이트 완료 후 다음 타이머 설정
• 더 정확하고 예측 가능한 타이밍

2. 의존성 배열 최적화

}, [text, speed]); // onComplete 제거로 불필요한 재실행 방지

onComplete 콜백을 의존성에서 제거해서 불필요한 useEffect 재실행을 막았습니다. 어차피 타이핑이 완료될 때만 호출되므로 최신 값이 자동으로 사용됩니다.

3. useRef 완전 제거

더 이상 ref로 타이머나 상태를 관리하지 않습니다. React의 자연스러운 lifecycle에 맡기니 코드가 훨씬 깔끔해졌습니다.

---

📊 실제 사용 예시

// 기본 사용법
const AIResponse = ({ content }) => {
  const { displayedText, isTyping } = useTypewriter({
    text: content,
    speed: 50, // 50ms 간격
    onComplete: () => {
      console.log('AI 응답 완료!');
      // 완료 후 추가 동작 (예: 음성 읽기, 다음 질문 활성화 등)
    }
  });

  return (
    <div className="ai-message">
      <div className="content">
        {displayedText}
        {isTyping && <span className="cursor animate-pulse">|</span>}
      </div>
      {!isTyping && (
        <div className="actions">
          <button>좋아요</button>
          <button>복사</button>
        </div>
      )}
    </div>
  );
};

// 채팅 대화에서 사용
const ChatConversation = ({ messages }) => {
  return (
    <div className="chat-container">
      {messages.map((message, index) => (
        <div key={index} className={`message ${message.role}`}>
          {message.role === 'assistant' ? (
            <AIResponse content={message.content} />
          ) : (
            <div>{message.content}</div>
          )}
        </div>
      ))}
    </div>
  );
};

 

---

🎯 마무리

이번 삽질에서 배운 교훈들

1. useRef로 명령형으로 제어하려 하지 말고 React의 선언적 특성을 활용하자.
2. 불필요한 의존성이 예상치 못한 재실행을 유발할 수 있다(실무에서 자주 겪음 ㅎ). 특히 함수형 props 주의!
3. setInterval보다 setTimeout 재귀가 React 상태 업데이트와 더 잘 어울립니다.