[React] Immer

✅ 불변성

• react의 상태를 업데이트 할 때 불변성을 지키는 것은 매우 중요
• 예로 기존 데이터를 수정할 때 직접 수정하지 않고, 새로운 값을 만들어 교체하는 방식
  => 이는 아예 새로운 값을 만들기 때문에 React.memo를 사용했을 때 props의 변경 여부를 알아내 리렌더링 성능 최적화 가능
• 🌟 이처럼 기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것이 불변성을 지키는 것 🌟

✅ immer

• 일반적으로 새로운 값을 만들어 교체하는 경우, 전개연산자(...)를 사용
• 하지만 전개연산자는 객체나 배열 내부 값을 복사할 때는 가장 바깥쪽 값만 '얕은 복사'가 됨
• 예로 객체 안에 이중, 삼중으로 객체가 있다면, 이 내부 값들은 각각 전개연산자를 사용하지 않으면 복사되지 않음!!
• 이를 더 쉽게 도와주는 라이브러리 immer!!

🔸 설치

터미널> npm install immer

터미널> yarn add immer

🔸 produce

• immer를 사용한 불변성 유지 작업에는 produce 함수를 사용
• produce의 첫 번째 파라미터는 수정하고 싶은 상태, 두 번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수

// 🔹 기본예시
import produce from 'immer';
const nextState = produce(originState, draft => {
    // 바꾸고 싶은 값 바꾸기
    draft.somewhere.deep.inside = 5;
})

// 🔹 사용예시
import produce from 'immer';

const originState = [
    {
        id : 1,
        txt : 'hello'
    },
    {
        id : 2,
        txt : 'bye'
    }
];

const nextState = produce(originState, draft => {
    // id로 항목 찾아서 수정하기
    const text = draft.find(t => t.id == 2);
    text.txt = 'hello world!!';

    // 새로운 데이터 추가
    draft.push({
        id : 3,
        txt : 'good night'
    })

    // id로 항목 찾아서 제거
    draft.splice(draft.findIndex(t = t.id == 1));
})

🔸 참고사항

• immer를 사용하면 컴포넌트 상태 작성 시 객체 안의 값을 직접 수정하고나 직접적 변화를 일으키는 push, splice를 사용해도 무방
• 물론 immer를 사용하는게 의무는 아님
• 제거의 경우 배열 내장 함수 filter를 사용하는 것이 오히려 코드가 깔끔하기도 함

🔸 참고사항2 - useState 함수형 업데이트와 immer

• immer의 produce를 호출할 때, 첫 번째 파라미터가 함수 형태라면 업데이트 함수를 반환

const update = produce(draft => {
    draft.value = 2;
})
const originState = {
    id : 1,
    value : 123,
}

...

const nextState = update(originState)