[React][라이브러리] 코드 타이핑 효과 추가 # react-typed

# react-typed를 사용하여 타이핑 효과 구현하는 방법

- 안녕하세요 Jake입니다. 본 포스팅에서는 react-typed 라이브러리를 사용해서 타이핑 효과를 구현하는 방법을 소개하려고 합니다. 타이핑 효과는 사용자들한테 문자열이 실제로 입력되는 것처럼 보이게 하여 시선을 끌어주기에 애용되는 효과 중 하나입니다. 그렇지만 기대대는 효과 대비 구현이 번거롭다는 것이 문제입니다. 이런 경우 오늘 소개할 라이브러리를 활용해 보시는 것은 어떨까요?

 

 

# 관련 페이지

- 깃헙 페이지

https://github.com/ssbeefeater/react-typed

GitHub - ssbeefeater/react-typed: A react wrapper for typed.js

- 예제 페이지

ssbeefeater.github.io/react-typed

Storybook

 

# 사용방법

- 라이브러리를 설치합니다

yarn add react-typed
        #or
npm install react-typed --save

 

- 아래의 코드는 깃헙 페이지의 예제 입니다. 보시는 바와 같이 사용 방법은 아주 간단합니다. Typed 컴포넌트에 strings를 넣어주고, typeSpeed를 넣어주는 것으로 완료입니다. 나머지는 타이핑효과를 제어하기 위한 컨트롤입니다

import React,{ Component } from 'react';
import { render } from 'react-dom';
import Typed from 'react-typed';

class MyComponent extends Component {
    render() {
        return (
                <div>
                    <Button onClick={this.typed.start()}>Start</Button>
                    <Button onClick={this.typed.stop()}>Stop</Button>
                    <Button onClick={this.typed.toggle()}>Toggle</Button>
                    <Button onClick={this.typed.destroy()}>Destroy</Button>
                    <Button onClick={this.typed.reset()}>Reset</Button>
                    <Typed
                    typedRef={(typed) => { this.typed = typed; }}
                    strings={['Here you can find anything']}
                    typeSpeed={40}
                    />
                </div>
        );
    }
}

render(
    <MyComponent/>,
    document.getElementById('app'),
);

- 그리고 추가로 react-typed는 typed.js라는 JS 라이브러리를 랩핑 한 것이기 때문에 해당 라이브러리의 옵션들도 사용이 가능하니 좀 더 세밀한 기능을 원하시는 경우 typed.js의 옵션을 찾아서 적용하시면 될 것 같습니다. 물론 typed.js를 바로 React에서 사용하시는 것도 가능하니, 원하시는 디테일에 따라 적절하게 선택하시면 될 것 같습니다.

---