차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- react:tictactoe [2018/08/02 05:02] – [Keys] taekgu
+++ react:tictactoe [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 715: / 줄 715: @@
 </code>
 지금까지의 코드는 [[https://codepen.io/gaearon/pen/PmmXRE?editors=0010|이곳]]에서 보실 수 있습니다.
+아직 jumpTo가 정의되지 않았기 때문에 이동 버튼을 클릭하면 에러가 발생합니다. 지금 표시된 단계가 무엇인지 알기 위해 Game상태에 새로운 키를 추가해봅시다.
+먼저 Game의 constructor에 stepNumber: 0를 추가해주세요.
+<code javascript>
+  class Game extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        history: [{
+          squares: Array(9).fill(null)
+        }],
+        stepNumber: 0,
+        xIsNext: true,
+      };
+    }
+</code>
+그 다음 각 상태를 업데이트하기 위해 Game의 jumpTo메서드를 정의해봅시다. 이 메서드에서는 xlsNext를 업데이트하고, 이동의 인덱스가 짝수라면 xlsNext를 true로 설정합니다.
+Game클래스에 jumpTo메서드를 추가해주세요.
+<code javascript>
+    handleClick(i) {
+        // this method has not changed
+    }
+    jumpTo(step) {
+        this.setState({
+            stepNumber: step,
+            xlsNext: (step % 2) === 0,
+        })
+    }
+    render() { // this method has not changed }
+</code>
+Game handleClick에 상태를 업데이트하기 위해 stepNumber:history.length를 추가하여 새로운 이동이 있을 때마다 stepNumber를 업데이트합니다. 현재 보드의 상태를 읽을 때 handleClick이 stepNumber라고 보고 클릭하는 시간대로 상태를 되돌릴 수 있습니다.
+<code javascript>
+    handleClick(i) {
+      const history = this.state.history;
+      const current = history[history.length - 1];
+      const squares = current.squares.slice();
+      if (calculateWinner(squares) || squares[i]) {
+        return;
+      }
+      squares[i] = this.state.xIsNext ? 'X' : 'O';
+      this.setState({
+        history: history.concat([{
+          squares: squares
+        }]),
+        stepNumber: history.length,
+        xIsNext: !this.state.xIsNext,
+      });
+    }
+</code>
+이제 히스토리의 각 단계를 알기 위해 Game의 render를 수정할 수 있습니다.
+<code javascript>
+    render() {
+        const history = this.state.history;
+        const current = history[this.state.stepNumber];
+        const winner = calculateWinner(current.squares);
+        // the rest has not changed
+</code>
+지금까지의 코드는 [[https://codepen.io/gaearon/pen/gWWZgR?editors=0010|이곳]]에서 보실 수 있습니다.
+이제 이동 버튼을 클릭하면 보드는 즉시 그때 표시된 게임으로 변경됩니다.
+==== 마무리 ====
+틱택토 게임을 플레이 해보세요.
+  * 틱택토 게임을 플레이 해보세요.
+  * 한 명의 플레이어가 게임에서 이길 때 이를 알려줍니다.
+  * 게임이 진행되는 동안 이동 기록이 저장됩니다.
+  * 게임 보드의 에전 버전을 표시하기 위해 시간을 되돌릴 수 있습니다.
+잘 동작하네요! React가 어떻게 동작하는지 잘 아셨기를 바랍니다.
+최종 결과물은 [[https://codepen.io/gaearon/pen/gWWZgR?editors=0010|여기]]에서 확인하세요.
+**시간이 더 있거나 새로운 스킬들을 연습해보고 싶다면 해볼 수 있는 몇 가지 아이디어가 있습니다. 점점 더 어려운 순으로 배치해두었습니다.**
+  - 움직임 리스트에서 (col,row)형태에 각 움직임 위치를 표시하세요.
+  - 움직임 리스트의 선택된 아이템을 볼드처리하세요.
+  - 하드코딩한 것들 대신 사각형을 두 개의 루프를 사용하여 Board를 다시 작성하세요.
+  - 오름차순 혹은 내림차순 뭐든지 움직임을 정렬하는 버튼을 추가해보세요.
+  - 누군가 이겼을 때 무엇 때문에 이겼는지 세 개의 사각형을 하이라이트하세요.
+튜토리얼이 진행되는 동안 우리는 엘리먼트, 컴포넌트, props, 상태를 포함한 React의 수많은 컨셉들을 다뤘습니다. 각 주제에 대한 깊은 설명을 원한다면 [[https://reactjs.org/docs/hello-world.html|남은문서]]를 확인하세요. 컴포넌트정의에 대해 더 많이 배우고 싶다면 [[https://reactjs.org/docs/react-component.html|이 문서]]를 확인하세요.

GaramX

사용자 도구

사이트 도구

차이

문서 도구