[React] 동전을 뒤집어보자 -!

동전을 뒤집는 동작을 리액트로 구현하기. 

 

버튼을 누를 때마다 뒤집은 횟수가 증가하고 동전 앞면과 뒷면이 랜덤으로 나오고 이 역시 나올 때마다 그 횟수를 증가하게끔 한다. 간단해보이는데 생각보다 코드를 써야하더라. 

 

버튼을 누르고 횟수 증가하고 랜덤이 되게끔 하는 것까진 구현했는데 동전 이미지의 면을 어떻게 하위 Component에 전달하지 모르겠더라. 이부분은 강사분이 하는 풀이영상을 봤는데 동전의 상태까지 state에 넣어 변화하는 상태를 기록하는 거였다.

 

class CoinFlip extends React.Component {
  static defaultProps = {
    sides: ['heads', 'tails']
  };

  constructor(props) {
    super(props);
    this.state = {
      currentCoin: null,
      flips: 0,
      heads: 0,
      tails: 0
    };
    this.onBtnClick = this.onBtnClick.bind(this);
  }

dafaultProps으로 sides를 넣고 'heads'와 'tails'를 넣었다. 이미지의 url이 거의 같고 'heads'와 'tails'만 바뀌만 되는 터라 저렇게 코드를 작성했다. 강사분은 아예 sides와 imgSrc를 하나의 object로 만들어서 이거 자체를 하위 Component에 넣는 식으로 코드를 짜더라. 강사분의 영상을 보고 추가한 currentCoin: null. 동전의 현 상태까지 변하는 요소로 봤어야 하는 거였다.

 

 onBtnClick() {
    const coinSides =
      this.props.sides[Math.floor(Math.random() * this.props.sides.length)];

    this.setState(curState => {
      return {
        currentCoin: coinSides,
        flips: curState.flips + 1,
        heads: curState.heads + (coinSides === 'heads' ? 1 : 0),
        tails: curState.tails + (coinSides === 'tails' ? 1 : 0)
      };
    });
  }

동전의 면이 랜덤으로 나오게 끔 코드를 짜고 이를 변수에 부여한다음 클릭을 할 때마다 랜덤으로 받는 동전의 면을 currentCoin의 state가 받도록 한다. 그래서 이 state를 하위 Component가 props으로 쓸 수 있게 한다.

 

setState에는 object뿐만 아니라 callback 함수도 받는다. 그래서 버튼을 누를 때마다 각각의 state가 변하도록 설정하고 'heads'와 'tails'를 확인할 때 난 if 조건문으로 되게 길게 썼다. 이걸 어떻게 간결하면서도 읽기 쉽게 쓸 수 있을까 생각했는데, 풀이영상을 보니 ternery operator를 써서 읽기도 쉽게끔-!

 

 

(다 썼는데 한 번 날려서 다시 쓰는 포스팅🥲)

 

 

---

 

참고 : The Modern React Bootcamp 섹션 9