상태가 업데이트되었는데 리렌더링이 안되는 경우

2048 게임을 만들던 중, 타일 이동 로직을 완성했다.
문제는 방향키를 누르면 업데이트된 좌표값을 가진 타일들을 담은 배열 tileList가 콘솔에도 잘 나오는데, 화면이 리렌더링되지 않았다.

원인

const [tileList, setTileList] = useState(getInitialGrid);

// ... 생략

function slideTile(x, y) {
  const sortedTileList = tileList.sort((tile1, tile2) => {
    // ...sorting logic
  });
  
  for (let i = 0; i < sortedTileList.length; i++) {
    // sortedTileList를 순회하며 좌표값 업데이트
  }
  
  setTileList(sortedTileList);
}

바로 sortingTileList에 tileList를 할당해줬기 때문이다..
배열과 같은 객체는 참조 자료형(Reference data types)으로, 참조 자료형은 변수에 할당하게 되면 변수에 주소(reference)가 저장된다.

그래서 상태 업데이트 함수를 호출하여 sortedTileList를 전달했을 때, React는 이전과 동일한 주소(참조값)를 받았으므로 변경이 없다고 간주하여 리렌더링을 수행하지 않은 것이다.

해결

따라서 sortedTileList를 만들 때, tileList의 복사본을 만들어 할당해줘야 했다.

function slideTile(x, y) {
  const sortedTileList = [...tileList].sort((tile1, tile2) => { // 복사
    // ...sorting logic
  });
  
  for (let i = 0; i < sortedTileList.length; i++) {
    // sortedTileList를 순회하며 좌표값 업데이트
  }
  
  setTileList(sortedTileList);
}