tic-tac-toe 마무리하며

완성된 결과물 링크

기본 튜토리얼을 다 따라가면서 만들었다.

튜토리얼 사이트 마지막 부분에 가면 해답을 알려주진 않는 추가 도전 사항이 있다.

• 무승부 표시하기
• 이긴 빙고 부분 표시하기
• 이동 기록에 해당 좌표 기록하기
• 현재 해당하는 이동 기록 굵은 글씨로 만들기
• 이동 기록 내림차순으로도 가능하게 버튼 만들기
• 게임판 반복문으로 만들기
• 개인적으로 추가한 과제 : 가장 최근 놓은 곳 표시하기

처음엔 따라가기만 해도 벅찼다.
컴포넌트를 만들고, state를 활용해 props로 내려주고 하는 방식에 익숙하지 않았기 때문이다.

코딩애플의 리액트 코드짜는 법
위 링크된 영상을 보면 확실하게 이해할 수 있다.

이를 바탕으로 도전 과제를 수행하기 위해 필요한 모든 요소는 메인이 되는 컴포넌트 안에 state로 선언해 사용했다.

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isAscending: true,
      history: [
        {
          squares: Array(9).fill(null),
          position: {
            row: null,
            col: null,
          },
        },
      ],
      stepNumber: 0,
      xIsNext: true,
      clickBox: null,
    };
  }

처음에는 값이 없고, 만들면서 변경되는 요소는 setState를 활용해 변경해주고 그것이 필요한 컴포넌트에 props로 내려주면서 활용했다.

 handleClick(i) {
    /**
   	  ...(생략)
   **/

    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      history: history.concat([
        {
          squares: squares,
          position: {
            row: parseInt(i / 3 + 1),
            col: (i % 3) + 1,
          },
        },
      ]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext,
      clickBox: i,
    });
  }

게임판에 나오는 말판을 클릭할 때마다 좌표를 구하고, 클릭한 박스도 표기하고, 다음 말판이 무엇인지까지 변경된 값을 알려주기 위해 사용한 예시다.

아직 익숙하지는 않지만, 자바스크립트보다 쉽다는 걸 이해할 수 있는 튜토리얼이었다.

완료가 끝난 지금까지도 '리액트에서는 이런 식으로 값을 전달하는 거구나'라는 큰 개념만 알게 됐다.
이제 다른 세세한 건 공식문서를 기준으로 공부할 계획이다.