web3-react 기본 개념 정리(+web3.js)

web3.js 란?

자바스크립트 기반으로 이더리움 Dapp이나 서비스를 구현할 때 사용되고 통신을 위하여 JSON-RPC API를 호출한다.

구조도는 아래 이미지 참고

 

 

기능

web3.js는 내부적으로 HTTP나 IPC를 통해 JSON RPC API를 호출하도록 되어 있다.

이더리움 네트워크는 노드로 구성되어 있고, 각 노드는 블록체인의 복사본으로 가지고 있다. 만약, 스마트 컨트랙트의 함수를 실행하고자 한다면 노드에 질의를 보내 아래의 세가지 정보를 전달해야 한다.

 

1. 스마트 컨트랙트 주소
2. 실행할 함수
3. 함수에 전달할 변수들

이더리움의 노드들은 JSON-RPC로만 소통할 수 있고, 이는 개발자에게 불편한 일이기 때문에 web3.js는 개발자들이 쉽고 편리하게 자바스크립트 인터페이스로 상호작용할 수 있도록 해준다.

 

 

 

 

web3-react

react 앱에서 Context를 이용해 web3의 Dapp과 관련된 특정 주요 데이터(사용자의 현재 계정, chain id, web3 provider 등)를 최신 상태로 유지해주는 state machine이다.

web3-react를 사용하기 위해서는 web3ReactProvider를 import 해야 한다.

import { Web3ReactProvider } from '@web3-react/core'

 

web3-react에 getLibrary 함수를 props로 전달해줘야 하는데 이 함수의 역할은 web3-react가 사용할 web3-provider를 제공하는 역할을 한다.

export default function() {
  const getLibrary = (provider) => {
    console.log('[getLibrary] provider', provider);
    return new Web3Provider(provider);
  };
  
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <App />
    </Web3ReactProvider>
  );
}

 

그 후 Web3ReactProvider의 하위 컴포넌트에서 useWeb3React를 통해 Context를 아래와 같이 얻을 수 있다.

import { NetworkConnector } from '@web3-react/network-connector';
import { useWeb3React } from '@web3-react/core';

const networkConnector = new NetworkConnector({
  url: {
    1 : process.env.RPC_URL_1
  },
  defaultChainId: 1
});

function App() {
  const { connector, activate, deactivate, active } = useWeb3React();
  // ...생략
  
  const onClickActivate = () => {
    activate(networkConnector);
  };
  
  const onClickDeactivate = () => {
    deactivate(connector);
  };
  
  return (
    <div className="App">
      <b>Current Block Number : </b>
      {blockNumber}
      <br />
      <button onClick={onClickActivate}>activate</button>
      {activ && <button onClick={onClickDeactivate}>deactivate</button>}
    </div>
  );
}