-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
TicTacToe.jsx reducer 부분 질문입니다
20.08.16 14:50 작성 조회수 98
1
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를 적용했을 때
렌더링이 정상적으로 되지 않더라구요
어떤 이유 때문에 위와 같은 현상이 생기는지 알 수 있을까요?
답변을 작성해보세요.
1
조현영
지식공유자2020.08.16
불변성을 지키기 위해서 객체를 새로 만들어서 넣어주는 역할입니다. 불변성을 지키지 않으면 리액트가 뭐가 바뀌었는지 파악하지 못해서 렌더링이 되지 않습니다.
0
답변 2