# 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)
}
```

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://archive-ko.docs.klaytn.foundation/content/dapp/tutorials/count-dapp/5.-frontend-code-overview/5-1.-blocknumber-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.