immer를 사용해서 불변성을 지켜야하는 이유와 얕은 복사의 개념

 

 

immer 란?

React에서 불변성을 유지하느라 난잡해진 코드를 짧고 간결하게 불변성을 유지할수 있게 도와주는 라이브러리이다. 

반대로 immer 사용함으로 짧은 코드가 길어지는 경우도 있다.

 

불변성 개념

불변성이란 기존의 상태 값을 유지하면서 새로운 상태 값을 추가하는 것을 의미한다.

 

불변성을 지키는 이유 

만약에 list OR 상태 값을 리렌더링 하고 싶을때가 있다고 가정한다. 

state.push({ title: "값 추가" })을 통해서 배열에 직접 10이라는 값을 추가한다. 

React에서는 해당 state라는 값은 새로운 참조값으로 바뀐것이 아니기 때문에 push 이전에 값가 push 이후에 값에 state 참조하는 메모리값이 같다고 판단하여 리렌더링이 일어나지 않는다. 

 

이러한 이유로 state 값을 변경해서 리렌더링을 일어나게 하기위해서 새로운 배열을 생성해서 기존에 값을 넣어줘서 불변성을 지켜야한다. 

 

 

ex: immer를 사용한 예제 

const baseState = [
  {
    title: "Learn TypeScript",
    done: true,
  },
  {
    title: "Try Immer",
    done: false,
  },
];


//immer 사용하기전 불변성 관리 우리가 흔히 보는 코드 
const v2 = [...baseState, { title: "Tweet about it" }];



//immer 사용후 코드  
const nextState = produce(baseState, (draft) => {
  draft.push({ title: "Tweet about it" });
});

 

⚡immer 사용 개념은 

produce라는 함수를 사용해서 첫번째 매개변수는 수정하고 싶은 값(객체나 배열) 두번째는 새로운 값을 만드는 매개변수이다. 

baseState값을 수정하고  싶고 draft 에 수정된 값을 새롭게 만든다라는 개념으로 이해하면 좋을꺼 같다. 

 

⚡얕은 복사 개념이 중요

객체, 배열, 함수 같은 참조 타입들을 실제 내부 값까지 비교하지 않고 동일한 참조인지만을 비교하는 것을 의미!

 

얕은 복사에 개념을 잘 이해했다면 답을 알아야된다. 

위에 코드에서 

 

1번

baseState === v2 : 정답은? false

baseState === nextState : 정답은? false


2번

baseState[0] === v2[0] : 정답은? true

baseState[0].title === nextState[0].title : 정답은? title

참조타입으로 객체, 배열 불변성 관리로인해 저장된 메모리값이 다르기때문에 
1번은 false 

얕은 복사는 내부에 값들은 같은 메모리를 참조하기 때문에 
2번은 true

 

 

불변성을 지키면 좋은 이유

• 불변성이란 메모리 영역의 값을 변경할 수 없는 것이다. 
• 리액트는 불변성을 지켜줌으로써 효율적인 상태 업데이트를 한다. 
• 리액트는 불변성을 지켜줌으로써 사이드 이펙트를 사전 방지하고 프로그래밍의 구조를 단순하게 유지한다. 
• immer 사용하면 가독성과 코드를 간결하게 불변성을 사용할 수있다. 

 

---

 

 

"쉽고 빠르게 구글 최적화 SEO를 만드는 웹툴!"