【React】 코드를 작성하는 애니메이션을 작성합니다.

개요

Next.js에서 markdown 블로그를 만들었는데, 그 안에서 코드를 쓰는 것 같은 애니메이션을 구현해 보았으므로 공유합니다.
커스텀 훅으로서 잘라낼 수 있었으므로 누구라도 사용할 수 있습니다.

완성된 것

자작 블로그 에서 볼 수 있습니다.

맞춤형 후크

setInterval 에서 문자열 길이의 상태를 업데이트하고 있습니다.

setStep.ts

import { useEffect, useRef, useState } from 'react';

export const useStep = (text: string, stepTime: number) => {
  const [length, setLength] = useState(0);
  const lengthRef = useRef(length);

  useEffect(() => {
    lengthRef.current = length;
  }, [length]);

  useEffect(() => {
    const timer = setInterval(() => {
      setLength(lengthRef.current === text.length ? lengthRef.current : lengthRef.current + 1);
    }, stepTime);
    return (): void => clearInterval(timer);
  }, []);

  return text.slice(0, length);
};

Ref 를 사용하지 않으면 클로저의 기능에 의해 setInterval 내의 length 의 값이 바뀌지 않습니다.setInterval 하면 useEffect 의 return에 타이머 해제 콜백을 잊지 마세요.

구성요소

코드와 간격을 지정하고 반환 값을 render하면됩니다.

LiveCode.tsx

import React from 'react';

import { useStep } from '../../hooks/useStep';
import { CodeBlock } from '../Post/MarkDownViewer';

type Props = {
  code: string;
  language: string;
};

export const LiveCode: React.FC<Props> = props => {
  const codeState = useStep(props.code, 35);
  return (
    <>
      <CodeBlock value={codeState} language={props.language} />
    </>
  );
};

CodeBlock 컴퍼넌트에서는 React-Markdown 와 react-syntax-highlighter 를 사용하고 있습니다.

요약

React 너무 재미 있습니다.
역시 커스텀 훅으로 기능과 컴퍼넌트를 나눌 수 있는 곳이 쿨합니다.