(BlockChain)

먼저 작업할 폴더에 React 환경을 설치해 보겠습니다.

설정이 완료되면 사용하지 않는 내장 효과를 삭제하십시오.

그런 다음 네 가지 산술 연산에 따라 입력 값에 따라 원래 0이었던 숫자를 변경하는 Solidity Contract 코드를 작성합니다.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.18;

contract InputCalc{
    int private result;

    constructor(){
        result = 0;
    }

    function getResult() public view returns (int){ 
        return result;
    }   
   function add(int _input) public {
    result += _input;
  }

  function minus(int _input) public {
    result -= _input;
  }
   function multiply(int _input) public {
    result *= _input;
  }

  function division(int _input) public {
    result /= _input;
  }
}

컴파일 및 배포 명령 계약에 대한 JSON 파일이 생성되면

계약 폴더를 복사하여 React 환경에 붙여넣습니다.

다음으로 커스텀 훅을 만들어 보겠습니다!!!

기존 Hook 대신 원하는 Hook을 만들어서 사용해보자.

이 후크에 Metamask가 설치되어 있지 않으면 그냥 종료됩니다(아무것도 실행되지 않음).

이 경우 Web3 통신을 통해 Metamask를 연결하고 연결된 계정을 반환하는 후크를 만들어 봅시다.

import {useState, useEffect} from "react";
import Web3 from "web3";

const useWeb3 = ()=>{
    const (web3, setWeb3) = useState();
    const (account, setAccount) =useState();

    useEffect(()=>{
        (async () =>{
            if(window.ethereum) return;
            const (address) = await window.ethereum.request({
                method:"eth_requestAccounts",
            })
            setAccount(address);

            const _web3 = new Web3(window.ethereum);
            setWeb3(_web3);
        })()
    },())
    return (web3,account);
    
}

export default useWeb3;

이렇게 좋은 커스텀 훅을 만들었다면

앞서 트러플을 컴파일한 후 CA의 abi와 새로운 컨트랙트를 만들고 ganache에 접속한 후 보통 마이그레이션 명령으로 나오는 컨트랙트

solidity 파일의 메서드를 연결해 봅니다.

useEffect(() => {
    (async () => {
      if (deployed) return;
      const _deployed = new web3.eth.Contract(
        InputCalcContract.abi,
        "0xb02d46c5d6dbaeE6F47f855b4443C5adb1ECA5f8"
      );
      setDeployed(_deployed);

      const _result = await _deployed.methods.getResult().call();
      setResult(parseInt(_result));
    })();
  }, ());

• 즉시 실행 기능을 선언하고 정상적으로 배포한 후 컨트랙트의 CA와 abi를 이용하여 get 기능을 견고하게 실행하여 결과 값을 재정의합니다.

결과 값이 정상적으로 표시되면 4개의 산술 연산 각각에 대한 함수를 생성하고 solidity에서 생성한 메서드에 대한 액세스를 선언합니다.

  const add = async (_input) => {
    const data = await deployed.methods.add(_input).send({ from: account });
    if (!data) return;
    const _result = await deployed.methods.getResult().call();
    setResult(_result);
  };
  const minus = async (_input) => {
    const data = await deployed.methods.minus(_input).send({ from: account });
    if (!data) return;
    const _result = await deployed.methods.getResult().call();
    setResult(_result);
  };
  const multiply = async (_input) => {
    const data = await deployed.methods
      .multiply(_input)
      .send({ from: account });
    if (!data) return;
    const _result = await deployed.methods.getResult().call();
    setResult(_result);
  };
  const division = async (_input) => {
    const data = await deployed.methods
      .division(_input)
      .send({ from: account });
    if (!data) return;
    const _result = await deployed.methods.getResult().call();
    setResult(_result);
  };

또한 함수를 선언하고 호출하기 위해 HTML 객체를 생성합니다.

<div>
      <input
        type="number"
        value={inputValue}
        placeholder={"연산할 수를 입력하세요"}
        onInput={(e) => {
          setInput(e.target.value);
        }}
      />
      <button
        onClick={() => {
          add(inputValue);
        }}
      >
        더하기
      </button>
      <button
        onClick={() => {
          minus(inputValue);
        }}
      >
        빼기
      </button>
      <button
        onClick={() => {
          multiply(inputValue);
        }}
      >
        곱하기
      </button>
      <button
        onClick={() => {
          division(inputValue);
        }}
      >
        나누기
      </button>
      <div>Result : {result}</div>
    </div>

뭐, 오타 없이 정상적으로 했다면,

App.js에서 사용자 정의 후크 및 최상위 구성 요소를 하나로 병합

import useWeb3 from "./Hooks/useWeb3";

import NumberCalc from "./components/NumberCalc";

function App() {
  const (web3, account) = useWeb3();

  if (!account) return <div>No MetaMask || disconnected Accounts</div>;
  return (
    <div>
      <div>Now Account : {account}</div>
      <NumberCalc web3={web3} account={account} />
    </div>
  );
}

export default App;

다음에는 익스프레스로 연결되는 코드를 올려보도록 하겠습니다.

항상 감사합니다