[TIL] Redux - Todo List

Today I Learned

어제 배운 Redux를 복습할 겸 간단한 React Todo List에 Redux를 활용해 보았다.

React Reux Todo Codesandbox

틀이 주어지고 빈 칸을 채우는 과제와 달리 백지에서 시작하려니 아직 사용법이 익숙하지 않아 어렵게 느껴졌다. 레퍼런스를 보며 더듬더듬 완성하긴 했지만 action, reducer, store가 제대로 연결되어 dispatch를 실행했을 때 제대로 앱이 작동하는 걸 보니 오랜만에 코딩하는 재미를 느꼈다.

오후에 sprint review를 들으며 헷갈렸던 부분을 바로 알게 되었다.

• state를 업데이트 할 때 deep copy하지 않고 shallow copy한다. React에서는 효율성을 위해 Object.assign이나 spread operator를 사용해 shallow copy를 한다고 했다. 그렇기 때문에 state 구조를 짤 때 deep copy할 일이 없게 만들어야 한다. 이는 Redux에서 뿐만 아니라 React에서 setState할 때도 마찬가지다. copy할 때 주의할 것은 mutable한 메소드 (push나 splice같은 메소드)를 사용하면 안된다는 것이다.