[React] react 공식문서 틱택토 시간여행 동작 이해

틱택토의 막바지에 시간 여행 부분이 살짝 햇갈렸다. 그래서 먼저 정리를 해보려고 한다. 

먼저 시간 여행을 하는 방법은 버튼 리스트를 만들어서 #번째 move로 이동하여 그때의 기록을 가져오는 것이다. 

history state는 원본을 차곡차곡 배열을 배열 형태로 가지고 있기 때문에 모든 정보를 가지고 있다. 

몇번째 move 인지에 대한 정보인지에 대한 변수가 필요하기 때문에 currentMove state를 선언하였고 이를 통해 #번째의 move에 접근한다. 

버튼 리스트 중에서 어떤 버튼이 클릭되면(onClick) 해당 history로 이동할 수 있도록 setCurrentMove를 실행하도록 한다. 

 

그러면 해당 컴포넌트가 '리렌더링'된다. 

 

그러면 결과적으로 currentSquares도 값이 변한다. 

 

여기서 변한 currentSquares는 Board의 인자에서 squares(배열임)라는 값으로 넘어간다. 

 

즉, Board도 리렌더링 될 것이다. 

 

그러면 Board를 구성하는 Square 컴포넌트도 리렌더링 될 것이다. 

 

Square들은 sqaures 배열의 문자 X, O를 value로 가진다. 

 

결과적으로 과거의 기록을 가져오는 것이 가능하게 되었다.

해당 과거의 기록으로 이동한 뒤에 그대로 플레이하는 것이 가능하려면 박스를 클릭한 직후부터의 과거를 기록해야한다. 

 

즉, 클릭이 발생하면 원래 있었던 기존의 과거는 버리고 새로운 과거를 기록하는 것이다. 

 

(새로운 타임라인) 클릭이 발생하는 함수는 handlePlay 였기 때문에 이 함수를 수정하여야 한다. 

 

새로운 변수 nextHistory를 만들고 기존의 history 배열을 조각내고 slice로  0부터 해당 시점인 currentMove까지 가져갈 수 있도록 하며, 클릭된 요소를 추가하여 새로운 history 배열을 하나 만든다.

이 배열을 history로 갱신해야 되기 때문에 setHistory(nextHistory);를 한다. 

 

그리고 현재의 move는 새로운 타임라인이 만들어졌기 때문에 바뀌어야한다. 

 

박스의 클릭이 발생한 것이고 새로운 history도 만들어졌기 때문에 현재의 move는 nextHistory의 길이 - 1이 될 것이다.

 

마지막으로 X와 O를 토글해주면 된다~