TicTacToe.jsx reducer 부분 질문입니다

case CLICK_CELL:
            const tableData = [...state.tableData];
            tableData[action.row] = [...tableData[action.row]]; // immer라는 라이브러리로 가독성 해결
            tableData[action.row][action.cell] = state.turn;
            // console.log(tableData[action.row]);
            return {
                ...state,
                tableData,
                recentCell: [action.row, action.cell],
           }
위 코드에서
tableData[action.row], [...tableData[action.row]]
두 값이 동일한데 [...tableData[action.row]] <-- 이 배열을 대입해주는
이유가 있을까요?
콘솔로 찍어봐도 동일한값으로 나오길래 주석처리하고 진행해보니
정상작동은 하는데 최적화 부분에서 memo를 적용했을 때
렌더링이 정상적으로 되지 않더라구요
어떤 이유 때문에 위와 같은 현상이 생기는지 알 수 있을까요?

인프런 커뮤니티 질문&답변