Redux] 불변성 유지

상태 관리에서 불변성을 유지하는 이유

리액트와 리덕스는 setState나 dispatch 되었을 때 re-rendering이 일어나게 됩니다.

불필요한 재렌더링은 웹 성능을 저하시킬 수 있기 때문에 useCallback을 사용하게 되는데요~

이 메소드는 state와 props의 변화를 감지해 변화가 일어날 경우만 렌더링을 허용합니다!

여기서 불변성이 필요한 이유는 무엇일까요?

setState나 Dispatch를 이용해서 상태를 바꾸지 않는다면 re-rendering이 일어나지 않기 때문입니다.

또한 이전 state와 현재 state를 비교하여 최신 상태를 유지하기 때문에 불변성을 유지해야 합니다.

만약 state를 직접적으로 변경한다면 기존 상태도 수정이 되어버려 이전 state와 비교하는 것이 불가능합니다!

불변성을 유지하는 방식

state를 직접적으로 변경하면 안 된다는 사실을 알았는데요~

그렇다면 불변성을 유지하면서 state를 어떻게 관리해야 할까요?

spread 문법을 사용할 수 있습니다.

setState([{
  list : [...list]
}])

만약 spread 문법을 사용하지 않는다면 어떻게 관리해야 할까요?

concat을 사용하면 됩니다!

setState({
  list:list.concat(4)
})

concat이 사용이 가능한 이유는 concat은 인자로 주어진 배열이나 값들을

기존 배열에 합쳐서 새 배열을 반환하기 때문입니다.