#04 리액트 입문 :: 리액트 불변성과 중요한 이유 (immer.js)

TIL

- 배열 메서드를 사용시  {...state,a :10} 과 같은 스프레드 용법을 사용해서

코드를 구현하지 않았는데 불변성에 배우고 나니, 잘못 코드를 구현하고 있음을 알게 되었다.

다음에는 참조값을 사용할 때는 불변성 개념을 생각하여 스프레드 용법을 잘 생각해야겠다.

 

1. 불변성 (immutability) 개념

- 원본 데이터 변형 x

데이터 변경 필요시 새로운 원본 만드는 디자인 패턴

 

(1) 불변성 x (mutable) : 배열 push 메서드 

arr = [1,2,3]; / arr.push(4) -> arr = [1,2,3,4]

 

(2) 불변성 (immutable) : 배열 map 메서드

arr = [1,2,3] / arr.map(x => x*2) -> arr = [1,2,3] (원본 데이터는 그대로)

 

2. 리액트에서 불변성이 중요한 이유

(1) 리액트 lift cycle에 따라 리랜더링이 안 될 수 있음

- [setState]가 실행 > update가 발생(state상태가 다르면 > Rendering 발생)

- state는 얕은비교 (참조값 : 주소끼리 비교 / 원시값 : 데이터 값 자체를 비교)

* 참조값 (배열,객체,함수 등) >> 새로운 객체가 생성되어야 주소가 변경되어 랜더링이 발생!

 

 

(2) 부작용 발생 가능

- 코드가 많아지면 그 후에 부작용 발생 가능

const [state, setState] = useState({a:1,b:2});


(x)  state.a = 10
(o)  {...state, a:10}

 

3. 불변성 지키는 수단 

(1) {...state,a :10} 과 같은 spread를 사용하여 새로운 주소값을 할당하고 랜더링 발생시키기

(2) 불변성 지원 라이브러리 사용 : immer.js

 

* 순수함수 : same input & output  + no side effect

(same input = props / state : 읽기전용으로 쓰고 변경은 setState 사용)

=> 입력값을 불변성 있게 해야함!!!

=> 원본을 건드리는 건 비순수함수!

 

4. 참고자료

https://immerjs.github.io/immer/

Introduction to Immer | Immer

https://doesitmutate.xyz/

Does it mutate?