[React] 리액트 타자기(TypeWriter) 효과 구현하기 feat.제너레이터

이미지 출처 dev.to

 

기본 로직

---

타자기로 한 글자씩 입력하는 효과(Typewriter Effect)는 이미 수 많은 라이브러리가 있지만, setInterval 타이머 API를 이용해서 직접 구현할 수 있다. 원래 문장(텍스트)을 한 글자씩 자른 후 가장 앞에 글자부터 하나씩 이어 붙이는 방식이다.

<!-- HTML -->
<div>
  <span class="content"></span>
  <span class="blink" />
</div>

// JS
const $content = document.querySelector('.content');

function typewriter(target, sentence, speed = 200) {
  const split = sentence.split('');
  let text = '';
  let i = 0;

  const timer = setInterval(() => {
    if (i < split.length) {
      text += split[i++]; // ++는 후위 증감(증가하기전 값 반환)
      target.textContent = text;
    } else {
      clearInterval(timer);
    }
  }, speed);
}

typewriter($content, 'hello world', 400);

 

깜빡이는 커서 효과는 | 콘텐츠를 갖는 <span> 태그에, step-end, step-start 같은 애니메이션을 추가한다. :after 수도 클래스를 사용하지 않고 <span>|</span> 형태로 입력해도 된다.

/* CSS 깜빡이는 커서 효과 */
.blink::after {
  content: '|';
}

.blink {
  animation: blink 1s step-end infinite;
  font-weight: bold;
  margin-left: 1px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

 

React Hook으로 만들기

---

React에 적용할 때도 setInterval을 이용해 위와 비슷한 로직으로 작성하면 된다.

 

• Hook이 처음 호출되면 index 를 1씩 더하는 setInterval 내부 함수가 sec초 간격으로 실행된다.
• 입력받은 문장(텍스트)의 index를 초과하면 안되므로 content.length - 1 미만까지만 실행한다.
• index 상태가 변경되면 2번째 useEffect가 실행돼서 현재 index에 해당하는 글자를 이어 붙인다.

 

// hooks/useTypeWriter.js
export default function useTypeWriter({
  content,
  sec = 200,
  hasBlink = false,
}) {
  const [displayedContent, setDisplayedContent] = useState('');
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const animKey = setInterval(() => {
      setIndex((index) => {
        if (index < content.length - 1) {
          return index + 1;
        }
        clearInterval(animKey);
        return index;
      });
    }, sec);
    return () => clearInterval(animKey);
  }, []);

  useEffect(() => {
    setDisplayedContent(
      (displayedContent) => displayedContent + content[index],
    );
  }, [index]);

  return (
    <>
      {displayedContent}
      {hasBlink && <span className="blink" />}
    </>
  );
}

 

작성한 Hook은 아래처럼 원하는 조건(깜빡임 커서 여부, 입력 속도)에 맞춰 실행할 수 있다.

// Component.js
import useTypeWriter from '@/hooks/useTypeWriter';

export default function Component() {
  const typingText = useTypeWriter({
    content: 'Hello World',
    sec: 200,
    hasBlink: true,
  });

  return <p>{typewriterText}</p>;
}

 

제너레이터 함수로 구현하기

---

💡 제너레이터 함수를 호출하면 실행을 처리하는 제너레이터 객체가 반환된다. 제너레이터 함수는 이터러블이며, 함수 자체에 전개 문법을 사용할 수도 있다.

 

제너레이터 톺아보기

일반 함수는 0~1개 값만 반환할 수 있지만 제너레이터 함수는 여러개의 값을 필요에 따라 하나씩 반환(yield)할 수 있다. next()를 호출하면 가장 가까운 yield <value>문을 만날때까지 실행하고 value를 반환한다. 아래 예시에선 함수 안에 while(true) 문이 있으므로 next() 메서드를 호출할 때마다 'even' 'odd' 를 반복해서 반환하고 있다.

function* zebraGenerator() {
  while (true) {
    yield 'even';
    yield 'odd';
  }
}

const zebra = zebraGenerator(); // 제너레이터 객체 반환
zebra.next(); // {value: 'even', done: false}
zebra.next(); // {value: 'odd', done: false}

 

제너레이터 문법을 활용해 입력받은 문장을 한 글자씩 자른 뒤 가장 앞 글자부터 이어붙이도록 만들 수 있다. 더이상 반환할 value가 없으면(sentenceAsCharArray 배열 순회를 마치면) undefined를 반환하고, 반환하는 객체내 done 속성은 true로 변한다.

function* textGenerator(sentence) {
  let text = '';

  const sentenceAsCharArray = sentence.split('');

  for (const letter of sentenceAsCharArray) {
    text += letter;
    yield text;
  }
}

const generator = textGenerator('HI');
generator.next(); // {value: 'H', done: false}
generator.next(); // {value: 'HI', done: false}
generator.next(); // {value: undefined, done: true}

 

React에 적용하기 ⭐️

입력받은 문장을 한 글자씩 자른 후 이어붙이는 제너레이터 함수는 utils 파일로 옮겨서 재사용할 수 있도록 한다.

// lib/utils.js
export function* textGenerator(sentence) {
  let text = '';

  const sentenceAsCharArray = sentence.split('');

  for (const letter of sentenceAsCharArray) {
    text += letter;
    yield text;
  }
}

 

기존 작성했던 Hook은 useEffect를 1번만 사용하는 방식으로 깔끔하게 작성할 수 있다. setInterval 함수의 딜레이 간격에 따라 generator.next() 메서드가 실행돼서 한 글자씩 이어붙인 텍스트를 반환한다

// hooks/useTypeWriter.js
import { textGenerator } from '@/lib/utils';

export default function useTypeWriter({
  content,
  sec = 100,
  hasBlink = false,
}) {
  const [displayedContent, setDisplayedContent] = useState('');

  useEffect(() => {
    const generator = textGenerator(content);
    const interval = setInterval(() => {
      const { value, done } = generator.next();
      if (done) {
        clearInterval(interval);
      } else {
        setDisplayedContent(value);
      }
    }, sec);

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

  return (
    <>
      {displayedContent}
      {hasBlink && <span className="blink" />}
    </>
  );
}

 

지우고 다시 입력하는 효과 구현 ⭐️

---

Step 1. Backspace 횟수 계산

Hello World를 입력했다가 World를 지우고 Winter를 다시 입력한다고 가정하면 아래처럼 W 이전까지 백스페이스를 눌러서 한 글자씩 지우고 inter를 차례대로 입력하는 과정을 거친다.

Hello Worl   (Backspace)
Hello Wor    (Backspace)
Hello Wo     (Backspace)
Hello W      (Backspace) 
Hello Wi     (i 입력)
Hello Win    (in 입력)
Hello Wint   (int 입력)
Hello Winte  (inte 입력)
Hello Winter (inter 입력)

 

d부터 o(orld)까지 지우기 위해 Backspace를 4번 눌렀다. Backspace를 몇 번 눌렀는지 알기 위해선 원래 문장 길이(length)에서, 원래 문장/바꿀 문장의 마지막 동일 글자 위치(index + 1)를 빼면 된다.

Hello World
Hello Winter
------------
1234567 --> 7번 위치(인덱스 6 + 1)까지 동일
------------
11(Hello World 길이) - 7 = 4 -> Hello World에서 Backspace 4번
------------

 

위 내용은 아래처럼 함수로 작성할 수 있다. 현재 반복문을 순회하는 인덱스에 대한 from, to 글자가 같다면 charsIn... 변수 값을 1씩 더하고, 같지 않다면 반복문을 멈추고 계산한 Backspace 횟수를 반환한다.

// lib/utils.js
export function calculateBackspaces(from, to) {
  let charsInCommonFromStart = 0; // from, to의 마지막 동일 글자 위치(index + 1)

  for (let i = 0; i < from.length; i++) {
    const fromChar = from[i];
    const toChar = to[i];

    if (toChar === fromChar) {
      charsInCommonFromStart += 1; // Hello W 까지 동일하므로 7
    } else {
      break;
    }
  }

  return from.length - charsInCommonFromStart; // 11 - 7 = 4
}

calculateBackspaces('Hello World', 'Hello Winter'); // 4

 

Step 2. Backspace 횟수 만큼 글자 삭제

Backspace 횟수를 알았으니 이제 계산한 횟수만큼 글자를 지워준다. 첫번째 문장은 Backspace 횟수가 0이어서 삭제할 글자가 없으므로 Backspace 횟수 만큼 글자를 삭제하는 반복문은 그냥 건너뛴다.

// lib/utils.js
export function* textGenerator(sentences) {
  // sentences는 ['Hello World', 'Hello Winter'] 라고 가정(원래 문장, 바꿀 문장)
  let text = '';

  for (const sentence of sentences) {
    // (1) Backspace 횟수 계산
    const backspaces = calculateBackspaces(text, sentence);
    // (첫번째 문장) 0
    // (두번째 문장) 4

    // (2) 계산한 Backspace 횟수만큼 뒤에서 부터 글자 삭제
    // 첫번째 문장 혹은 backspaces가 0이면 아래 반복문은 건너뜀
    for (let i = 0; i < backspaces; i++) {
      text = text.slice(0, -1);
      console.log(text);
      // 2번째 문장부터...
      // 'Hello Worl' -> 'Hello Wor' -> 'Hello Wo' -> 'Hello W'
    }
  }
}

 

Step 3. 바꿀 문장 입력

💡 첫번째 문장(sentence)일 땐 text가 빈 문자열에서 ‘H’ → ‘He’ → ... 하나씩 이어 붙여짐

 

Backspace 횟수 만큼 문장을 지웠으니, 다시 지운 내용을 채워야 된다. 먼저 ➊빠진 글자를 찾고, ➋찾아낸 빠진 글자를 한 글자씩 자른 뒤 ➌Backspace횟수만큼 삭제한 문장에 이어붙이면 된다.

// lib/utils.js
export function* textGenerator(sentences) {
  // sentences는 ['Hello World', 'Hello Winter'] 라고 가정(원래 문장, 바꿀 문장)
  let text = '';

  for (const sentence of sentences) {
    // (1) Backspace 횟수 계산, (2) Backspace 횟수 만큼 글자 삭제하는 코드 생략...

    // (3) 바꿀 문장 입력
    const missingChars = sentence.slice(text.length);
    // (첫번째 문장) 'Hello World'.slice(0) -> 'Hello World'
    // (두번째 문장) 'Hello Winter'.slice(7) -> 'inter'
    const missingCharsArray = missingChars.split('');
    // (첫번째 문장) ['H','e','l','l','o',' ','W','o','r','l','d']
    // (두번째 문장) ['i', 'n', 't', 'e', 'r']

    for (const missingChar of missingCharsArray) {
      text += missingChar;
      console.log(text);
      // (첫번째 문장) 'H' -> 'He' -> 'Hel' -> 'Hell' -> 'Hello' -> ...
      // (두번째 문장) 'Hello Wi' -> 'Hello Win' -> 'Hello Wint' -> ...
    }
  }
}

 

Step 4. 다음 문장으로 넘어갈 때 딜레이 추가

'Hello World' 입력을 마치고 다음 문장 'Hello Winter' 로 바로 넘어가면 사용자 입장에선 읽을 시간이 부족하다. 따라서 두 문장 사이에 delay 시간이 필요하다. delay 숫자만큼 동일한 text를 계속 표시하는 방법으로 delay 시간을 줄 수 있다.

// lib/utils.js
export function* textGenerator(sentences) {
  // sentences는 ['Hello World', 'Hello Winter'] 라고 가정(원래 문장, 바꿀 문장)
  let text = '';

  for (const sentence of sentences) {
    // (1) Backspace 횟수 계산, (2) Backspace 횟수 만큼 글자 삭제하는 코드 생략...
    // (3) 바꿀 문장 입력 코드 생략...

    // (4) 다음 문장으로 넘어갈때 딜레이 추가
    const delay = 15;
    for (let i = 0; i < delay; i++) {
      console.log(text); // 타이핑 딜레이 속도가 100ms라면 100 * 15 = 1500(1.5초)간 딜레이
      // (첫번째 문장) 'Hello World' 15번 렌더
      // (두번째 문장) 'Hello Winter' 15번 렌더
    }
  }
}

 

console.log → yield text 변경

Step 1~4에 입력했던 console.log(text)를 yield text로 변경한다. 그럼 ➊yield 문을 만날 때마다 text가 화면에 렌더되고, ➋useTypeWriter.js → useEffect 내부에 작성한 setInterval 타이머 시간이 지나면 ➍멈췄던 제너레이터가 다시 실행돼서 이전 for 문을 이어서 순회한다.

export function calculateBackspaces(from, to) {
  // Hello World (from)
  // Hello Winter (to)
  // ------------
  // 1234567 --> 7번 위치(인덱스 6 + 1)까지 동일
  // ------------
  // 11(Hello World 길이) - 7 = 4 -> Hello World 에서 Backspace 4번
  // ------------

  let charsInCommonFromStart = 0;

  for (let i = 0; i < from.length; i++) {
    const fromChar = from[i];
    const toChar = to[i];

    if (toChar === fromChar) {
      charsInCommonFromStart += 1;
    } else {
      break;
    }
  }

  return from.length - charsInCommonFromStart;
}

export function* textGenerator(sentences) {
  // sentences 는 ['Hello World', 'Hello Winter'] 라고 가정(원래 문장, 바꿀 문장)
  let text = '';

  for (const sentence of sentences) {
    // (1) Backspace 횟수 계산
    const backspaces = calculateBackspaces(text, sentence);
    // (첫번째 문장) 0
    // (두번째 문장) 4

    // (2) 계산한 Backspace 횟수만큼 뒤에서 부터 글자 삭제
    // 첫번째 문장 혹은 backspaces 가 0이면 아래 반복문은 건너뜀
    for (let i = 0; i < backspaces; i++) {
      text = text.slice(0, -1);
      yield text;
      // 2번째 문장부터...
      // 'Hello Worl' -> 'Hello Wor' -> 'Hello Wo' -> 'Hello W'
    }

    // (3) 바꿀 문장 입력
    const missingChars = sentence.slice(text.length);
    // (첫번째 문장) 'Hello World'.slice(0) -> 'Hello World'
    // (두번째 문장) 'Hello Winter'.slice(7) -> 'inter'
    const missingCharsArray = missingChars.split('');
    // (첫번째 문장) ['H','e','l','l','o',' ','W','o','r','l','d']
    // (두번째 문장) ['i', 'n', 't', 'e', 'r']

    for (const missingChar of missingCharsArray) {
      text += missingChar;
      yield text;
      // (첫번째 문장) 'H' -> 'He' -> 'Hel' -> 'Hell' -> 'Hello' -> ...
      // (두번째 문장) 'Hello Wi' -> 'Hello Win' -> 'Hello Wint' -> ...
    }

    // (4) 다음 문장으로 넘어갈때 딜레이 추가
    const delay = 15;
    for (let i = 0; i < delay; i++) {
      yield text; // 설정한 타이핑 속도가 100ms라면 100 * 15 = 1500(1.5초)간 딜레이
      // (첫번째 문장) 'Hello World' 15번 렌더
      // (두번째 문장) 'Hello Winter' 15번 렌더
    }
  }
}

import { textGenerator } from '@/lib/utils';

export default function useTypeWriter({
  content,
  sec = 100,
  hasBlink = false,
}) {
  const [displayedContent, setDisplayedContent] = useState('');

  useEffect(() => {
    const generator = textGenerator(content);
    const interval = setInterval(() => {
      const { value, done } = generator.next();
      if (done) {
        clearInterval(interval);
      } else {
        setDisplayedContent(value);
      }
    }, sec);

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

  return (
    <>
      {displayedContent}
      {hasBlink && <span className="blink" />}
    </>
  );
}

 

1개 문장이 아닌 여러개의 문장을 받도록 수정했으므로 아래처럼 배열에 여러 문장을 넣어서 Hook을 호출한다.

// Component.js
import useTypeWriter from '@/hooks/useTypeWriter';

export default function Component() {

    const typingText = useTypeWriter({
    content: ['Hello World', 'Hello Winter'],
        sec: 200,
    hasBlink: true,
  });

    return <p>{typewriterText}</p>;
}

 

타자기 효과 반복하기

기본적으로 입력받은 모든 문장을 순회하면 타자기 효과는 반복을 멈춘다(깜빡이는 커서는 계속 보임). 만약 타자기 효과를 반복해서 보여주고 싶다면(a 문장 → b 문장 → a 문장 → ...) 기존 코드를 while(true) 문으로 감싼 뒤 반복 여부에 따라 멈출지, 계속할지에 대한 조건을 추가하면 된다.

// lib/utils.js
export function* textGenerator(sentences, loop) {
  let text = '';

  while (true) {
    for (const sentence of sentences) {
      /* 생략 */
    }

    if (loop === false) {
      return;
    }
  }
}

 

레퍼런스

---

• Creating a Typewriter Effect
• A nice typing animation with React.Js!  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요