TICTACTOE 만들기 8 (JumpTo 함수 작성하기)

 

JumpTo 함수는

예를들어, 기록이 되어있는 해당 버튼을 선택했을 시 그 기록 상태로 돌아가는 것을 수행하는 함수이다. 

 

 

현재는 생성되어있는 버튼을 눌러도 버튼 이벤트가 없기 때문에 아무 것도 일어나지 않는다.

 

< 실습하기 >

app.js 파일로 가서

JumpTo 함수를 작성해주고 move의 버튼에 onClick 함수를 작성하여 JumpTo 함수를 넣어준다.

 

 

그리고 현재 몇번째 스텝인지 알 수 있는 새로운 State를 생성해준다. 

(이전으로 되돌아 갔을 때 그 step을 기억하기 위해서)

 

App.js위로 올라가서 작성해 줄껀데 useStateSnippet을 해주면 자동으로 코드가 완성되어 나타나져서 해당 변수만 변경해주면 된다.

 

 

 

이후 stepNumber를 업데이트 하기 위해 jumpTo를 정의해줄 것이다.

stepNumber가 짝수일 때마다 xIsNext를 true로 설정해준다.

 

 

 

- setNumber를 이용해서 그 당시의 history state로 돌아가기

handleClick에 jumpTo로 이동한 곳의 새로운 history와 새로운 current로 생성해준다.

항상 리액트에서는 불변성을 지켜줘야하기 때문에 새로 복사해서 사용해준다.

( 처음에는 stepNumber가 0이기에 history.slice(0,1)이 된다. )

 

const newHistory = history.slice(0, stepNumber + 1); 로 현재까지의 히스토리를 복사해주고

const newCurrent = newHistory[newHistory.length - 1]; 로 현재 상태를 가져온다.

 

 

 

 

newHistory는 우리가 '시간을 되돌려' 그 시점에서 새로운 움직임을 보이면, 지금은 올바르지 않은 '미래'의 기록을 모두 버리는 것을 보장하는 것이이라고 생각할 수 있다.

 

current에 history[history.length -1] 을 history[stepNumber]로 변경시켜 준다.

 

 

 

모두 작성한 후 틱택토 앱을 실행시켜보면 

이렇게 틱택토를 클릭한 뒤 생성되는 버튼들 중 2번을 클릭하게 되면 2번째 클릭하였던 모습으로 돌아가게 되고

 

여기서 다시 틱택토를 클릭해서 버튼 3이 반들어진다면 올바르지 않는 미래인 4,5,6 번 버튼들은 모두 삭제가 된 것을 확인 할 수 있다.