[ReactJS] 튜토리얼(Tutorial) - 3

튜토리얼(Tutorial) - 3

시작하기

본격적으로 틱택토 게임 작성을 해보자

튜토리얼 1에서 모든 과정을 마쳤으면 틱택토의 기본 뼈대가 생성되었을 것이다.

CSS 까지 작성되었기 때문에 디자인을 제외한 기능에만 집중 하면 된다.

index.js 코드를 보면 다음과 같은 3개의 컴포넌트로 구성되었다는것을 알 수 있다.

1) Square

2) Board

3) Game

Square는 컴포넌트는 하나의 <Button>을 랜더링하고, 

Board 컴포넌트는 9개의 Square를 랜더링 하며,

마지막으로 Game 컴포넌트는 Board와 나중에 채워질 placeholder를 랜더링 한다.

현재 시점에서는 모든 컴포넌트들이 데이터를 주고 받거나 상호작용하지 않지만, 코드를 개선하여

데이터나 인자값을 전송하는 방법에 대해 알아보자

Props를 사용하여 데이터 전송하기

먼저, Board에 데이터를 Square로 전송해보자.

class Board extends React.Component {                                                                    
  renderSquare(i) {
    return <Square value={i} />;
}

초기의 Board는 단순히 Square 컴포넌트를 랜더링 했었다.

틱택토 게임 동작을 위해 Board의 renderSquare 안에서 Square에게 전달되는 value값을 설정해 준다.

다시 말해 renderSquare는 인자값을 받아서 value라는 이름으로 Square에게 다시 인자를 전달해주는 메소드가 된다.

class Square extends React.Component {                                                                    
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

그런 다음, Square 컴포넌트로 돌아와서 전달받은 value를 사용해야 하는데,

상위 계층의 컴포넌트가 전달한 값은 props로 전달되며 props 뒤쪽에 상위 컴포넌트에서 설정한 이름으로 호출이 가능하다.

즉, Board에서 value라는 이름으로 전달한 인자값은

하위 컴포넌트인 Square에서 this.props.value로 받을수 있다는 것이다.

이를 통해 컴포넌트 간의 데이터 상호작용이 이루어진다.

이렇게 받은 value 값은 button 내부에 출력하게 코드를 변경해주자.

<button> 내부에 {this.props.value}를 입력해주면 된다. 

결과

before

after