React에서 Typed.js를 사용하는 방법(초보자 친화적)

오늘날 React는 웹 개발을 위한 인기 있고 강력하며 매우 수요가 많은 라이브러리입니다.

하지만 저와 같은 React 초보자에게는 가끔 Vanilla JS에서 사용했던 라이브러리를 React 프로젝트에 구현하는 것이 번거로울 때가 있습니다.

그렇기 때문에 React와 함께 사용할 수 있는 몇 가지 간단한 JS 패키지를 공유하여 웹 사이트를 좀 더 재미있고 매력적으로 만들고 React를 덜 두려워하게 만들 수 있습니다. 오늘은 하나를 공유하겠습니다.

Typed.js

멋진 타이핑 효과가 있는 자막이 있는 웹사이트를 본 적이 있습니까? Typed.js는 이를 쉽고 빠르게 구현하는 방법입니다.

Here is an example

설치

npm install typed.js
yarn add typed.js
bower install typed.js

설정

모든 패키지와 마찬가지로 페이지 상단에서 가져옵니다.
import Typed from "typed.js";
이 패키지를 React에서 작동시키려면 2개의 React 후크를 사용해야 합니다. 하나는 Typed 문자열이 이동할 요소를 참조(또는 선택)하기 위한 것이고 다른 하나는 부작용을 수행하기 위한 것입니다. 이 시나리오에서는 다음과 같습니다. DOM 조작. 그것들은 useRef와 *useEffect입니다.
import { useEffect, useRef } from "react";
이 예에서는 Typed 항목으로 제목을 마무리하고 싶으므로 useRef 후크를 사용하여 태그를 참조합니다.

const TypedTitle = () => {
  const el = useRef(null);
  return (
    <h1>
      I am <span ref={el}></span>{" "}
    </h1>
  );
};

Typed.js 초기화

이제 콜백이 Typed 초기화가 될 UseEffect 후크를 추가하기만 하면 됩니다.

const TypedTitle = () => {
  const el = useRef(null);
  useEffect(() => {
    const typed = new Typed(el.current, {
      strings: [
        "Full stack developer",
        "Front-end developer",
        "React Developer",
      ],
      startDelay: 300,
      typeSpeed: 100,
      backSpeed: 100,
      backDelay: 100,
      loop: true,
    });

    // Destroying
    return () => {
      typed.destroy();
    };
  }, []);
  return (
    <h1>
      I am <span ref={el}></span>{" "}
    </h1>
  );
};

문자열 배열은 나타나거나 사라지기를 원하는 Typed 항목입니다. 물론 개체 값을 조정하여 애니메이션을 사용자 지정할 수 있습니다.

그리고 이제 갈 수 있습니다!

원작자 Matt Bold에게 감사드립니다.

Link to GitHub