immer_불변성 유지

 

immer란 무엇인가

• react에서 불변성을 유지하는 코드를 작성하기 쉽게 해주는 라이브러리다.
• produce 함수를 사용하는데, 첫번째 파라미터에는 수정하고 싶은 상태,
  두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣어준다.
• 보통 produce(state, draft) 형태로 사용한다

 

 

immer는 어떤 원리로 작동하는가

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

React는 기본적으로 부모로부터 내려받는 Props나 내부 상태인 State가 변경되었을 때 컴포넌트를 다시 렌더링 하는 리렌더링 과정이 일어난다. React는 이 Props와 State의 변경을 불변성을 이용해서 감지한다.

'불변성을 지킨다'는 것은 기존의 값을 수정하지 않으면서 새로운 값을 만들어내는 것을 말한다.

이러한 불변성이 지켜지지 않으면 내부의 값이 새로워져도 바뀐 것을 감지하지 못한다. 

객체의 참조를 복사한다는 점을 이용해 단순히 참조만 비교하는 얕은 비교를 이용해서 변경이 일어났는지 확인한다.

 

기본 원리는 immer를 사용하여 모든 변경 사항을 currentState의 프록시인 임시 초안(draft)에 적용할 수 있다는 것이다.

객체 변이가 완료되면 Immer는 초안 상태에 대한 객체 변이를 기반으로 nextState를 생성합니다.

즉, 변경할 수 없는 데이터의 모든 이점을 유지하면서 데이터를 수정하기만 하면 데이터와 상호 작용할 수 있습니다.

 

 

immer 간단한 예시

아래 코드 예시는 immer 공식 문서에 존재하는 basic example을 가져온 것이다.

 

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

 

 

두 번째 데이터를 업데이트 하는 경우

Immer가 없으면 변경 사항의 영향을 받는 부분은 얕은 복사를 해야한다.

slice()를 사용해 얕은 복사본을 만들고 수정할 두 번째 데이터를 바꾼 뒤 다시 배열에 push해준다

 

const nextState = baseState.slice() // shallow clone the array
nextState[1] = {
    // replace element 1...
    ...nextState[1], // with a shallow clone of element 1
    done: true // ...combined with the desired update
}
nextState.push({title: "Tweet about it"})

 

 

Immer를 사용하면 이 프로세스가 더 간단하다. 

첫 번째 인수는 수정하고 싶은 상태, 

두 번째 인수는 상태를 어떻게 업데이트할지 정의하는 함수를 전달할 수 있다.

두 번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면 produce함수가 불변성 유지를 대신해 주고 새로운 상태를 생성해준다.

 

import produce from "immer"

const nextState = produce(baseState, draft => {
    draft[1].done = true
    draft.push({title: "Tweet about it"})
})

 

 

 

 

참고

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

https://ui.toast.com/weekly-pick/ko_20220217

https://velog.io/@a9120a

https://hsp0418.tistory.com/171