[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (2)

 

[ 오늘의 작업 과정 ]

홀수번째 두는 돌은 검정색, 짝수번째 두는 돌은 흰색이 나오도록 구현하기

---

 

 일단 css로 border-radius를 50%로 조정해서 돌을 동그랗게 만들어 줬다. 

돌의 색을 담을 state인 color를 만들어두고 초기 state는 공백으로 두었다.

let [color, setColor] = useState(''); // 현재 돌의 색상

돌의 색상 변경은 돌의 위치값 변경이 일어날 때마다 동작하므로 앞서 만들었던 handleCellClick 함수 안에 만들었다. 돌의 색이 검정이 아닐 때는 흰색으로 바뀌고 검정일때는 흰색으로 바뀌도록 돌의 색을 저장할 변수 newColor를 만들었다. 

 const handleCellClick = (i,j) => {
    setClickedCell([...clickedCell, {i,j}])
    const newColor = color === 'black' ? 'white' : 'black';
    setColor(newColor);
  }
  
  ... 생략
     return (
              <tr>
                {col.map(function (j) {
                  return <td 
                            className={ clickedCell.some(e => e.i === i && e.j === j) ? color : '' }
                            onClick={() => handleCellClick(i,j)}></td>;
                })}
              </tr>
            );
          })}

 

[ Trouble - shooting ]

문제 : 위 코드 결과 돌의 색이 홀 / 짝 번갈아가며 바뀌기는 하지만 아래와 같이 전체 돌의 색에 영향을 주고 있다 ㅜㅜ

뭐가 문제일까 고민해봤다. 위의 코드에서는 클릭한 칸의 좌표와 i 값과 j 값이 같은 칸은 전부 color 가 적용되고 있다. 따라서 클릭된 칸의 각각의 좌표별로 색의 값이 바뀌도록 해야한다.

td에 id값을 추가하는데 이 때 좌표값인 i와 j가 적용될 수 있도록 하면 각각의 좌표별로 다른 id값을 가질 수 있도록 한다. 그럼 이제부터는 쉽다. Dom selector을 이용해서 각각의 id를 가진 칸의 색을 newColor로 변경해주면 된다. 

const handleCellClick = (i,j) => {
    setClickedCell([...clickedCell, {i,j}])
    const newColor = color === 'black' ? 'white' : 'black';
    document.getElementById(`cell-${i}-${j}`).style.background = newColor;
    setColor(newColor);
  }
  
 ... 생략
 
   return (
              <tr>
                {col.map(function (j) {
                  return <td 
                            id={`cell-${i}-${j}`}
                            className={ clickedCell.some(e => e.i === i && e.j === j) ? color : '' }
                            onClick={() => handleCellClick(i,j)}></td>;
                })}
              </tr>
            );

아래는 완성된 결과다!