> For the complete documentation index, see [llms.txt](https://archive-ko.docs.klaytn.foundation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://archive-ko.docs.klaytn.foundation/content/dapp/tutorials/count-dapp/5.-frontend-code-overview/5-1.-blocknumber-component.md).

# 5-1. Blocknumber Component

`src/components/BlockNumber.js`:

## `BlockNumber` 컴포넌트 <a href="#blocknumber-component" id="blocknumber-component"></a>

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

### 1) 전체 코드 <a href="#id-1-full-code" id="id-1-full-code"></a>

```javascript
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 컴포넌트의 역할 <a href="#id-2-blocknumber-component-s-role" id="id-2-blocknumber-component-s-role"></a>

`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` 메서드 설명 <a href="#id-3-getblocknumber-method-in-detail" id="id-3-getblocknumber-method-in-detail"></a>

```javascript
/**
 * '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`의 주기적 호출 <a href="#id-4-call-getblocknumber-intervally" id="id-4-call-getblocknumber-intervally"></a>

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

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

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

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