TicTacToe.jsx reducer 부분 질문입니다

Question

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를 적용했을 때 렌더링이 정상적으로 되지 않더라구요 어떤 이유 때문에 위와 같은 현상이 생기는지 알 수 있을까요?

zerocho · Answer

불변성을 지키기 위해서 객체를 새로 만들어서 넣어주는 역할입니다. 불변성을 지키지 않으면 리액트가 뭐가 바뀌었는지 파악하지 못해서 렌더링이 되지 않습니다.

tkdals9048 · Answer

감사합니다!