5-1. Blocknumber Component

src/components/BlockNumber.js:

BlockNumber 컴포넌트

1) Full code 2) BlockNumber component's role 3) getBlockNumber method in detail 4) Call getBlockNumber intervally

1) 전체 코드

import React, { Component } from 'react'

import { cav } from 'klaytn/caver'

import './BlockNumber.scss'

/**
 * BlockNumber 컴포넌트는 1초(1000ms)마다 현재 블록 번호를 가져옵니다.
 * 현재 블록 번호는 Klaytn 노드와의 연결 및 통신을 담당하는 caver-js 라이브러리를 통해 불러올 수 있습니다.
 * 참고) 특정 Klaytn 노드에 연결하려면 klaytn/caver.js에서 'rpcURL' 설정을 변경하세요
 */
class BlockNumber extends Component {
  /**
   * BlockNumber 컴포넌트는 'currentBlockNumber'를 통해 상태를 나타냅니다.
   */
  state = {
    currentBlockNumber: '...loading',
  }

  /**
   * 'getBlockNumber' 메서드는 다음의 기능을 합니다.
   * 1) 'cav.klay.getBlockNumber()'를 호출하여 Klaytn 노드로부터 현재 블록 번호를 가져옵니다.
   * 2) 과정 1)을 통해 불러온 값을 'currentBlockNumber’에 저장합니다.
   */
  getBlockNumber = async () => {
    const blockNumber = await cav.klay.getBlockNumber()
    this.setState({ currentBlockNumber: blockNumber })
  }

  /**
   * intervalId 값은 `setInterval`에서 반환된 값으로 채워집니다.
   * intervalId 변수는 블록 번호를 불러오는 주기를 초기화하는 데에 사용되어 메모리 누수를 방지합니다.
   */
  intervalId = null

  /**
   * 'componentDidMount'의 생명 주기 동안 'getBlockNumber' 메서드를 주기적으로 호출합니다.
   */
  componentDidMount() {
    this.intervalId = setInterval(this.getBlockNumber, 1000)
  }

  /**
   * 'componentWillUnmount'의 생명 주기 동안 1000ms마다 getBlockNumber를 호출하는 주기를 초기화합니다.
   */
  componentWillUnmount() {
    if (this.intervalId) clearInterval(this.intervalId)
  }

  /**
   * 'render' 생명 주기 동안 'currentBlockNumber'의 상태는 아래와 같습니다.
   * <p>Block No. {currentBlockNumber}</p>
   */
  render() {
    const { currentBlockNumber } = this.state
    return (
      <div className="BlockNumber">
        <p className="BlockNumber__current">Block No. {currentBlockNumber}</p>
      </div>
    )
  }
}

export default BlockNumber

2) BlockNumber 컴포넌트의 역할

BlockNumber component's role is showing Klaytn's current block number. It requests the current block number to the Klaytn node by calling caver.klay.getBlockNumber() every second. 응답을 받으면 this.setState({ currentBlockNumber: blockNumber })를 통해 DOM을 다시 렌더링합니다.

3) getBlockNumber 메서드 설명

/**
 * 'getBlockNumber' 메서드는 다음의 기능을 합니다.
   * 1) 'cav.klay.getBlockNumber()'를 호출하여 Klaytn 노드로부터 현재 블록 번호를 가져옵니다.
   * 2) 과정 1)을 통해 불러온 값을 'currentBlockNumber’에 저장합니다.
 */
getBlockNumber = async () => {
  const blockNumber = await cav.klay.getBlockNumber()
  this.setState({ currentBlockNumber: blockNumber })
}

getBlockNumber 메서드는 비동기 함수로 선언됩니다. 함수를 비동기로 선언하면 비동기 값(promise)을 쉽게 처리할 수 있습니다. cav.klay.getBlockNumber는 프로미스를 반환하고 await 키워드를 추가하여 해당 결과를 쉽게 처리할 수 있습니다.

async-await 키워드에 대한 자세한 내용은 다음 자바스크립트 MDN 사이트를 참고해주세요. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

cav.klay.getBlockNumber()의 결과로 반환된 현재 블록 번호를 blockNumber에 저장했다면 this.setState 리액트 API를 호출합니다. this.setState({ currentBlockNumber: blockNumber })은 말 그대로 상태를 나타내는 변수 currentBlockNumber를 blockNumber로 설정합니다. this.setState(nextState)는 현재 상태를 업데이트하고 컴포넌트를 다시 렌더링합니다.

리액트의 this.setState와 렌더링 메커니즘에 대한 자세한 내용은 다음 리액트 공식 사이트를 참고해주세요. https://reactjs.org/docs/state-and-lifecycle.html

4) getBlockNumber의 주기적 호출

/**
 * 'componentDidMount'의 생명 주기 동안 'getBlockNumber' 메서드를 주기적으로 호출합니다.
 */
componentDidMount() {
  this.intervalId = setInterval(this.getBlockNumber, 1000)
}

튜토리얼의 애플리케이션이 현재 블록 번호를 생생하게 보여주게 하기 위해서 getBlockNumber를 1초(1000ms)에 한 번씩 호출하겠습니다. setInterval 함수로 주기적인 호출을 할 수 있습니다. setInterval(func, delay)는 특정 시간마다 반복적으로 주어진 함수를 호출합니다. 또한 setInterval의 실행 후 어떤 식별자가 반환되는데요. 이렇게 반환된 식별자를 this.intervalId 변수에 저장합니다. 이후에 설정된 주기를 초기화할 때 이 식별자를 사용합니다.

/**
 * 'componentWillUnmount'의 생명 주기 동안 1000ms마다 getBlockNumber를 호출하는 주기를 초기화합니다.
 */
componentWillUnmount() {
  if (this.intervalId) clearInterval(this.intervalId)
}

컴포넌트의 마운트를 해제하면 주기를 초기화하여 현재 블록 번호를 불러오는 것을 중지하세요.