TICTACTOE 만들기 7 ( 과거의 이동 표시하기 - map 메소드 )

 

● 과거의 이동 표시하기 (map 메소드)

지금까지 만든 것들은 틱택토 게임의 이동 정보를 기록하고 있기 때문에 이제 플레이어에게 과거이 이동을 목록으로 표시하도록 만들어 줄 것이다. (history state 안에 가지고 있다.)

 

 

 

 

 

- map() 함수를 이용해서 history 배열에 있는 것들을 하나씩 나열해주기

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

 

 

 

코드를 작성하는 곳으로 돌아가서 map() 함수를 이용해 moves를 작성해준다.

삼항연산자를 사용할때 move가 false 즉, 0이라면 'Go to Game start' 가 나오게 함으로써 move 인덱스가 0이면 제일 처음으로 0이 아닌 true라면 해당 이동순서로 이동할 수 있도록 작성해줬다.

그리고 <ol> 태그를 사용해서 현재 상태가 나올 수 있도록 작성해줬다.

 

move는 인덱스 값 (인덱스가 0일 때는 게임 시작 전으로 )

<ol> : orderedList의 약자로 순서가 있는 리스트

 

 

이렇게 하고 실행시키면 아래 처럼 나오는 것을 확인할 수 있다.

제일 처음 상태

 

 

하나 클릭했을 때

 

 

두번째 클릭했을 때

 

 

 

 

작동은 되지만 콘솔창을 열면 에러가 발생하는 것을 확인할 수 있기 때문에 이 에러를 해결하도록 해볼 것이다.

 

 

이 에러들을 해결하기 위해서는 이 리스트들에게 고유한 key 값을 주면 된다.

(https://ju5710.tistory.com/384 이거 읽어보기)

move는 history  배열의 index 값으로 0,1,2,3,4 이렇게 되기에 고유한 값이 되므로 리스트들에 하나씩 할당해주면 된다.

 

만약 이 리스트들이 중간에 삭제되거나 중간에 삽입되는 케이스가 있다면 index값을 key로 주면 안되고 실질적인 고유한 값을 줘야하지만 여기서는 중간에 삭제되거나 삽입되는 경우가 없기에 index값을 주면 된다.

 

 

 

 

위 처럼 li 태그에 key 값을 주면 아래 처럼 개발자 도구를 확인했을 때 오류가 발생하지 않는 것을 확인 할 수 있다.