Inflearn Community Q&A
asked
TicTacToe.jsx reducer 부분 질문입니다
Resolved
Written on
·
216
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를 적용했을 때
렌더링이 정상적으로 되지 않더라구요
어떤 이유 때문에 위와 같은 현상이 생기는지 알 수 있을까요?
react
Quiz
useReducer에서 상태(state)를 업데이트할 때 가장 중요하게 지켜야 할 원칙은 무엇인가요?
기존 상태 객체를 직접 수정해야 합니다.
항상 새로운 상태 객체나 배열을 반환해야 합니다.
이전 상태와 새로운 상태를 콘솔에 기록해야 합니다.
상태 업데이트는 반드시 동기적으로 이루어져야 합니다.
Answer 2
1
zerocho
Instructor
불변성을 지키기 위해서 객체를 새로 만들어서 넣어주는 역할입니다. 불변성을 지키지 않으면 리액트가 뭐가 바뀌었는지 파악하지 못해서 렌더링이 되지 않습니다.
0
