ShakeJ
MNWorld
ShakeJ
전체 방문자
4,237,605
오늘
9
어제
63
  • 카테고리
    • Contact
    • 🤔그냥이야기
    • 📷사진이야기
    • 제주도에서 한달을 살아보았다
    • 옛글
      • 👇Blog
      • 공지사항
      • 이슈
      • 생각들
      • 👇취미
      • 건프라
      • 👇Review
      • 노래리뷰
      • 영화리뷰
      • 👇Travel Story
      • 2011 도쿄여행기
      • 2013 Google IO
      • 2013 Jeju
      • 2014 HONGKONG
      • 2014 Jeju
      • 2014 Sanfransis..
      • 2015 Lombok
      • 2016 HONGKONG
      • 2017 Saigon
      • 국내여행기
      • Photo Story
      • Growth
      • 👇Server
      • Ruby on the Rai..
      • Frontend
      • FullStack (MEAN..
      • Ubuntu
      • 👇Android
      • 안드로이드 프로그래밍
      • 번역본
      • 내어플이야기
      • 코드창고
      • 👇iOS
      • 아이폰 프로그래밍
      • 맥북 이야기
      • 👇Microsoft
      • ASP.NET
      • Silverlight
      • 윈도우 이야기
      • 👇IT Story
      • 모바일 이야기
      • 하드웨어 이야기
      • 네트워크 이야기
      • 프로그래밍이야기
      • Database이야기
      • 클라우드이야기
      • 프론트 이야기
      • 마케팅이야기
      • 그래픽 작업
      • 블로그 팁

블로그 메뉴

  • GuestBook

공지사항

인기 글

  • 컴퓨터 팬 소음이 많이 날 때 고치는 방법 2가지
    2010.12.15
    컴퓨터 팬 소음이 많이 날 때 고치는 방법 2가지
  • Opacity 컬러코드 투명도 Hex값
    2015.07.13
  • 식은땀난 NO.2003 can't connet 'mysql⋯
    2011.02.23
  • iframe 가로스크롤만 없애기!(세로스크롤도 가능)
    2010.10.28
  • [안드로이드앱추천] 일어나 친구야 - 문자로 알람켜기
    2014.04.29
    [안드로이드앱추천] 일어나 친구야 - 문자로 알람켜기

태그

  • 블로그 잡담
  • 블로그 이야기
  • 티스토리
  • D40 사진
  • 블로그 처음
  • 블로그 팁
  • 풍경사진
  • 블로그 운영하기
  • 티스토리 초대장
  • 서울 출사지
  • 무료배너제작
  • 블로그 초보
  • 배너무료제작
  • 초대장
  • 블로그 꾸미기
  • iOS 프로그래밍
  • 윈도우폰7
  • 블로그 만들기
  • 배너교환
  • 랩
  • 블로그 운영
  • 티스토리 팁
  • 블로그 운영하면서
  • asp.net
  • shakej
  • 배너제작
  • 안드로이드 어플 추천
  • MNWorld
  • 블로그 관련
  • 블로그 시작하기

최근 댓글

  • 감사합니다~!
    ShakeJ
  • 포스팅 잘봤습니다 공감 누르고 가요~
    hellorly
  • 감사합니다 😄
    ShakeJ
  • 포스팅 잘봐서 좋아요 눌렀어요~~🤍 오늘하루도 힘차게 이겨⋯
    D
  • 앗 옛날에 쓴 그 게임 디스크 말씀이시군요.. 거진 10년⋯
    ShakeJ

최근 글

  • [제주도에서 한달을 살아보았다(1)] 한달살이를 시작하며 ⋯
    2022.06.14
    [제주도에서 한달을 살아보았다(1)] 한달살이를 시작하며 ⋯
  • [📷사진이야기] 붉은 호치민의 노을
    2022.02.10
    [📷사진이야기] 붉은 호치민의 노을
  • 13년간의 블로그, 오랫만의 글을 쓰며
    2022.02.09
    13년간의 블로그, 오랫만의 글을 쓰며
  • DB의 index와 rails가 기억하는 index가 틀려⋯
    2020.10.22
  • 건프라 삼국창걸전 SD를 세울 디오라마를 만들어보자!
    2020.09.29
    건프라 삼국창걸전 SD를 세울 디오라마를 만들어보자!

티스토리

hELLO · Designed By 정상우.
ShakeJ

MNWorld

[React+Rails] 타이핑 효과나는 텍스트 제작하기
옛글/Frontend

[React+Rails] 타이핑 효과나는 텍스트 제작하기

2019. 3. 26. 16:11


현재 프로젝트에 속보를 알려주는 타이핑 효과가 나는 텍스트를 리액트 컴포넌트로 바꿔보려 합니다. 


구글링을 해보니, 리액트 타이핑 효과를 내는 모듈이 많습니다. 그 중 react-typist 라는 패키지를 사용해보겠습니다. 

(Typist로만 감싸주면 애니메이션 효과가 나타나는 것이 간단해보여서 선택해봅니다)


1
npm install react-typist --save
cs


npm을 통해 설치합니다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
       <div class="ticker">
          <ul>
             <% breakings = Article.order("created_at desc").limit(10) %>
             <% breakings.each do |article| %>
              <li>
                <a href="/API주소?파라미터=<%= article.id %>" target="_blank">
                  <strong>속보</strong>
                  <% title = article.title %>
                  <% if title.length > 100 %>
                    <% title = "#{title[0..100]}..." %>
                  <% end %>
                  <%= title %>
                </a>
              </li>
             <% end %>
         </ul>
        </div>
Colored by Color Scripter
cs


Rails view에서 직접 쿼리를 날려 받아와 작성 된 코드입니다. (지저분..)


해당 코드 외에도 typed.js를 초기화하는 자바스크립트가 존재합니다. 


전부 삭제! 하고 

1
<%= react_component("BreakingNewsType") %>
cs


컴포넌트 호출 단을 HTML에 추가합니다. 


app/javascript/components/BreakingNewsType.js 파일을 생성합니다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, {Component} from 'react';
import Typist from 'react-typist';
 
export default class BreakingNewsType extends Component {
 
  render() {
    return (
      <Typist>
        Animate this text.
      </Typist>
    );
  }
}
 
Colored by Color Scripter
cs


오호 export default를 하단에 적어줄 수도 있지만, 클래스 앞쪽에 통합해서 적을 수 있네요. 


이렇게 예제를 적고 웹을 보니, 



정상적으로 타이핑 애니메이션이 동작합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, {Component} from 'react';
import Typist from 'react-typist';
 
const API = '';
 
export default class BreakingNewsType extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: []
    };
  }
 
  componentDidMount() {
    this.intervalId = setInterval(() => this.loadData(), 1000 * 5);
    this.loadData();
  }
 
  componentWillUnmount() {
    clearInterval(this.intervalId);
  }
 
  loadData() {
    console.log("load breaking news");
    fetch(API)
      .then(response => response.json())
      .then(data => this.setState({
        title: data.title
      }));
  }
 
  render() {
    return (
      <div className="ticker_container">
        <Typist>
          <b>최신</b> {this.state.title}
        </Typist>
      </div>
    );
  }
}
Colored by Color Scripter
cs


API를 만들고, 받아온 최신 뉴스를 보여주도록 만들었습니다. 


어랏 근데 동작을 안합니다.


loadData() 이후 데이터를 받고 나면 타이핑을 시작해주어야 하는 듯 합니다. 


state가 바뀌는데 왜 다시 render를 하지 않을까? 혹시 restart라는 함수가 있거나, update?를 호출해주어야 하나 싶어 살펴봅니다. (아니야 이러면 react의 장점이 없잖아!)

분명 react는 state가 변경되면, 자동으로 뷰가 변경될텐데... 싶어 찾다보니, react-typist에 key라는 것을 발견합니다. 


key의 경우 여러가지 문장을 이어서 쓰려고 할 때, 설정을 하는 것이라고 합니다. 

key는 고유값이니, api를 통해 받아온 뉴스의 ID값(고유값)으로 추가해 봅니다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
export default class BreakingNewsType extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: [],
      textIndex: 0,
    };
  }
 
  componentDidMount() {
    this.intervalId = setInterval(() => this.loadData(), 1000 * 5);
    this.loadData();
  }
 
  componentWillUnmount() {
    clearInterval(this.intervalId);
  }
 
  loadData() {
    fetch(API)
      .then(response => response.json())
      .then(data => this.setState({
        title: data.title,
        textIndex: data.id,
      }));
    this.forceUpdate();
  }
 
  render() {
    return <div key={this.state.textIndex} className="ticker_container">
        <Typist>
          <b>최신</b> {this.state.title}
        </Typist>
      </div>
  }
}
 
Colored by Color Scripter
cs


오.. key가 변경될때마다 (state 내에 title이 변경될때마다) 타이핑을 시작합니다!



  • 카카오스토리
  • 트위터
  • 페이스북

'옛글 > Frontend' 카테고리의 다른 글

MAC Node version 변경하기  (0) 2019.04.02
[React+Rails] 모델의 Index 페이지를 React로 만들어보자  (0) 2019.03.26
[React+Rails] 주기적으로 업데이트 되는 위젯을 만들어보자  (0) 2019.03.26
Rails + React + WebPack 환경 세팅 및 React 사용해보기  (0) 2019.03.25
    추천글👇
    • [📷사진이야기] 붉은 호치민의 노을
    React Rails, React typing 효과, React Typist
    ShakeJ
    ShakeJ
    댓글쓰기
    다음 글
    [React+Rails] 모델의 Index 페이지를 React로 만들어보자
    [React+Rails] 주기적으로 업데이트 되는 위젯을 만들어보자
    이전 글
    [React+Rails] 주기적으로 업데이트 되는 위젯을 만들어보자

    티스토리툴바