[react] 타이핑치는 효과 컴포넌트

안녕하세요! 코딩이 즐거운 좋아요요정입니다. 

오늘은 재사용가능한 타이핑치는 효과 컴포넌트를 가지고 왔습니다.

포트폴리오를 만들면서 하나씩 정리해서 기록해보려고 합니다. :) (아잣아잣!)

 

오늘 소개하는 함수는 타이핑치는 효과 컴포넌트 입니다!

 

결과 미리보기💕

①  인자값으로 test , speed, fontSIze, color를 받습니다. 

② 기본값으로 speed = 100, fontSIze= 1em, color: 'black'을 가지고 있습니다.

 

 

 

<TypingText  />

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

const TypingText = ({text, speed, fontSize, color}) => {
  TypingText.defaultProps = {
    fontSize: '1em', //기본값
    color: 'black'//기본값
  }
  const [Text, setText] = useState("");
  const [Count, setCount] = useState(0);

  useEffect(() => {
    let typingText = text ? text : "";//기본값
    let typingSpeed = speed ? speed : 100;//기본값
    const interval = setInterval(() => {
        setText((Text)=>{
          let updated = Text;
          updated = Text + typingText[Count];
          return updated;
        });
        setCount(Count + 1); 
    }, typingSpeed);
    Count === typingText.length && clearInterval(interval);
    return () => clearInterval(interval);
})
  return (
    <p style={{fontSize:`${fontSize}`, color:`${color}`}} >{ Text }</p>
  )
};

export default TypingText;

 

 

 

 

사용할 위치

import React from 'react';
import TypingText from '../../components/typingText/typingText';

const Loading = (props) => {

  return (
    <TypingText text="Thank you for visiting" speed={60} fontSize="1.25rem" color="green" />
    )
};

export default Loading;

인자값을 전달하지 않을 시 기본값으로 입력됩니다. 

오늘도 즐거운 코딩라이프되세요! :)