불변성 유지 (in 리액트 state, 리덕스 store) - FE study14

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

1-1. 리액트, 리덕스 재랜더링 방식

1. 리액트, 리덕스는 setState, dispatch 되었을 때 재렌더링(re-rendering)이 발생함
2. 불필요한 재렌더링을 피하기 위해 shouldComponentUpdate, useCallback(react-hooks)를 씀.
3. 이 메소드는 state와 props 의 변화를 감지해서 변화가 일어날 경우만!! 렌더링을 허용함.

불변성을 유지하는 이유1 : setState나 dispatch를 이용해서 상태를 바꾸지 않으면 재렌더링이 일어나지 않음. 그리고 위의 메소드를 쓸 경우, 이전state와 비교하기 위해서 불변성을 유지해줘야함.

1-2. 원시타입과 참조타입

1. 원시타입 (Boolean Number String ...)

// 원시타입은 변수에 값을 재할당 해도 값이 변하지 않음
let a = 1
let b = a
b = 100
console.log(a) // 1

2. 참조타입 (배열(Array) 객체(Object) ...)

// 참조타입은 변수가 같은 값을 참조하기 때문에 b를 조작해도 a도 바뀜
let a = [1,2,3]
let b = a
b.splice(0,1)
console.log(a) // [2,3]

불변성을 유지하는 이유2 : 상태(state)를 바꾸는 과정에서 참조변수를 불변성을 유지하지 않고 바로 수정해버리면 (arr.push(3) 과 같이) 기존 상태도 수정이 되어버려서 이전 state와 비교하는 것이 불가능해짐.

2. 불변성을 유지하는 방식

2-1. spread 문법

말그대로 해당 배열을 펴줘서 값들만 가져오는 방식

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

2-2. concat() 함수

arr.push() 함수를 쓰면 상태에 접근해 바뀌어버려 불변성이 깨지므로 arr를 변경하지 않는 concat()을 쓴다.

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

3. 불변성의 단점 보완

불변성을 계속 유지하려고 하면 쓸데없이 코드가 길어지고, 복잡한 구조의 상태는 접근조차 어려워질 수 있다.

그래서 불변성을 유지시켜주면서 코드를 단순하고 직관적으로 짤 수 있는 라이브러리(immutable,immer)가 존재함.