react를 활용한 Dapp 만들기(3. 간단한 Dapp 생성)

안녕하세요

오늘은 Private Ethereum Network를 이용한 간단한 물건 구매 Dapp을 만들어볼 예정입니다.

그럼 시작하겠습니다.

전편에서 만든 코드를 열고 App.js에 있는 코드를 다 지워주세요!

그다음으로, build/contracts폴더와 contracts폴더 안에있는 SimpleStorage.json, SimpleStorage.sol

파일자체를 지워주세요 저희는 새로운 컨트랙트를 생성할거랍니다.

자이제 Smart Contract부터 코드를 작성해보겠습니다.

매우 간단한 물건 구매기능을 가진 프로젝트이므로 쉽게 따라하실수 있을겁니다.

contracts 폴더안에 Store.sol 파일을 하나 생성해주세요.

먼저 위와같이 코드를 작성해주시고, mapping에 대해서 설명해드리겠습니다.

간단한 이해를 위해서, mapping는 배열이라고 생각하시면 되겠습니다

mappig(address=>uint)MyCokeNum

MyCokeNum[내 이더리움 계좌 주소] = 숫자

이런식으로 저장이 되어있는 형태라고 생각하시면 이해하시기 편하실거예요.

위에서 숫자는 앞으로 내가 콜라를 구매할때마다 한개씩 증가가 될겁니다.

다음으로, 구매함수를 작성할텐데요, 이부분도 어렵지 않습니다!

아래와 같이 작성해주시면 콜라구매, 내가 구매한 콜라 개수를 반환받는 함수 작성이 끝났습니다.

위에서 mapping에 대해서 이해하셨다면 BuyCoke함수, GetMyCokeNum함수에 대해 쉽게 이해하실거라 생각됩니다.

mapping에 대해 이해가 잘가지 않는 분은 댓글남겨주시면 답변드릴게요!

그리고 contract코드작성 마지막으로, migrations폴더에있는 2_deploy_contract를 수정해주겠습니다

다음으로 ganache를 실행시켜주시고, cmd이나 power shell 에서 truffle migrate --compile-all --reset --network --ganache를 입력함으로써, ganach네트워크를 사용한 migrate와 compile을 동시에 진행하겠습니다.

cmd창에 위와같은 메시지와함께 ganache 첫번째계정에서 이더가 조금 줄었다면 성공적으로 배포가 완료된것입니다!.

이제 다음으로 react를 이용해 프론트엔드 코드를 작성해보겠습니다.

아까 코드를 다 삭제했던 App.js파일에 코드를 작성할겁니다. 나중에 이것보다 조금 더 복잡합 프로젝트를 진행 할때는 새로운 component별로 폴더를 나눠서 작성해주시는게 훨씬 좋을겁니다!

일단 지금은 귀찮고.. 코드도 몇줄 안되니 그냥 App.js에 코드를 작성하겠습니다.

위와같이 코드를 작성해주시면 됩니다!. 코드에 대해서 설명을 드리자면

기본적으로 react로 생성된 프로젝트가 실행되면 constructor -> componentWillMount -> render -> componentDidMount 방식으로 렌더링이 이루어지게 되는데 componentWillMount 에서 web3를 불러와서 state에 저장하고, 앞으로 state를 통해 web3 사용하겠다는 의미입니다.

그리고,

instantiateContract함수에서 Store.sol파일을 불러와 현재의 web3(저희는 메타마스크)에서 사용하겠다는 의미입니다.

state에 instance상태와 account상태를 저장하도록 추가 코드를 작성해주시고,

instantiateContract함수 아래쪽에 작성된 코드에선 배포된 인스턴스를 state의 storeInstance에 저장, web3에서 사용되는 첫번째 계정을 MyAccount에 저장합니다.

다음으로, 콜라구매와 콜래개수 가져오는 함수를 작성하겠습니다.

state에 새로운 변수를 하나 추가해줍시다. 배포된 계약에 저장되어있는 나의 콜라개수를 가져와, 저 변수에 저장할 거예요.

그리고 buyCoke, getMyCoke 함수를 새로 생성해줄게요 !

과정을 설명드리면

첫번째로, this.state.storeInstance를 이용해 저희 smart contract에 접근을 합니다.

두번째로, solidity에서 작성한 함수인 buyCoke기억나시죠? 그함수를 사용하겠다는 의미이고

세번째로, from : 어떤계좌에서 송금이 이루어질것인가. value는 this.state.web3.toWei(10,"ether")라는 코드를 통해 buyCoke 함수가 한번 호출될때 10개의 이더를 지불할것이다 라는 코드입니다.

getMyCoke도 비슷합니다. 전에 만들어둔 myCokeNum변수에 계약에 저장된 나의 콜라개수를 저장을 하겠다는 의미이죠

자이제 간단한 프론트엔드 ui를 만들어보도록 하겠습니다.

간단 dapp만들기 소스코드 부분은 완성입니다! 잘 작동하나 확인해보시죠!

cmd나 power shell에서 npm start로 프로젝트를 실행하겠습니다

굉장히 잘 작동하는걸 확인하실수 있습니다! 음 다음시간에는 조금더 기능을 추가한 Dapp를 만들어보도록 하겠습니다. 잘 이해가 안되거나 질문있으시면 댓글부탁드려요!

아래 코드 올려드리겠습니다 ㅎ

import React, { Component } from 'react'
import Store from '../build/contracts/Store.json'
import getWeb3 from './utils/getWeb3'

class App extends Component {
constructor(props) {
super(props)

this.state = {
web3: null,
storeInstance:null, //storeInstance 추가
myAccount:null, //myAccount 추가

//새로운추가 코드
myCokeNum:0 // 나의 콜라 개수저장 변수 myCokeNum추가
   }
}

componentWillMount() {
getWeb3
   .then(results => {
this.setState({
web3: results.web3
     })

this.instantiateContract()
   })
   .catch(() => {
console.log('Error finding web3.')
   })
}

instantiateContract() {

render() {
return (
<div>
<h1>콜라 구매 Dapp</h1>
<div>콜라 구매하기 : <button onClick={this.buyCoke}>클릭</button></div>
<div>나의 콜라 개수 : {this.state.myCokeNum}</div>
</div>
);
}
}

export default App