TICTACTOE 만들기 6 ( 동작에 대한 기록 저장하기 )

 

 

이전에는 slice()를 사용해서 매 동작 이후에 squares 배열의 새로운 복사본을 만들어 이를 불변 객체로 취급해 과거의 squares 배열의 모든 버전을 저장하고 이미 지나간 차례를 탐색할 수 있었다면

이번에는 squares 배열들을 hitory 배열에 저장할 것이다.

 history 배열은 첫 동작부터 마지막 동작가지 모든 게임판의 상태를 표현하는 것이다. 그래서 이전 상태로 돌아가려한다면 돌아갈 수 있도록 할 수 있다.

 

history 배열 예시

 

 

이 history state는 이전 동작에 대한 리스트를 보여주려면 최상위 단계의 app 컴포넌트가 필요하다.

history를 이용해야하므로 최상위 단계 App 컴포넌트에 histroy state를 둔다.

(board 부분을 누르면 history 변경이 필요하므로 최상위에 둠 - 부모 컴포넌트에서 만드록 자녀 컴포넌트에 내려주는 것)

 

● App Componenet를 함수형으로 변경하기

 

 

● State를 App 컴포넌트로 옮겨주기

const로 history를 작성해주고, board.js에 적혀있는 const xIsNext를 잘라 App.js에 붙여넣기 해준다.

 

 

 

 

 

● Winner 상태와 계산하는 함수도 App 컴포넌트로 옮겨주기

- ESLint 확장프로그램

 : is not defined일 경우이거나 올바르지 않은 문법같은 곳에 에러를 띄워줌

 

위의 확장 프로그램을 다운 받은 후  board.js에서 const winner와 const calculateWinner를 잘라내 붙여넣기 해주면 winner의 squares가 .app.js에서 정의되지 않았기 때문에 에러가 나는 것을 볼 수 있다.

 

 

이 에러를 해결하기 위해 current 를 만들어 준 뒤 history 배열의 squares를 선택해서 winner에 current.squares를 넣어준다.

위의 history 배열 예시에서 3번째 squares는 length가 3이지만 인덱스는 2

 

이렇게 하면 에러가 사라진 것을 확인할 수 있다.

그리고 위의 사진처럼 board.js에서 let status와 if문도 가져와서 넣어준다.

 

 

 

 

● App Componenet로 handleClick 함수 이동하기

마지막으로 handleClick 함수를 board에서 app으로 이동해주는데 app컴포넌트의 state가 다르게 구성되어있기 때문에 handleClick에서 새로운 기록 목록을 history로 연결하기 위한 수정을 해야한다.

 

* slice()하는 이유는 원본을 바로 수정하는 것이 아니라 복사본을 만들어서 수정한 다음 넣어주기 위해 사용

전개연산자를 사용해서 원본을 넣는것이 아니라 복사본을 넣어준다.

 

 

 

 

● App Componenet에 있는 함수와 State를 Board 컴포넌트에 내려주기

이까지 하고 Board.js를 확인해보면 여러 에러들이 발생하는 것을 확인 할 수 있다.

 

이 에러들을 없애주기 위해 App.js에서 board.js로 내려주는 작업을 해준다.

먼저 App.js의 <Board /> 부분에서 squares와 onClick을 내려준다.

 

 

 

 

 

● Board 컴포넌트에서 Props 받아주기

그리고 Board.js에서 내려준 squares와 onClick을 받아준다.

 

방법1.

 

방법2. 

 

 

방법2가 더 깔끔하기 때문에 방법2로 해주고 handleClick으로 되어있던 것을 onClick으로 변경해준다.

이후 Board.js의 return에 적혀있던 <div className='status'>{status}</div> 를 잘라내 App.js의 return문의 gameinfo부분에 넣어준다.

board.js

 

app.js

 

 

 

 

그리고 실행해보면 이렇게 바뀐 것을 확인 할 수 있다.