[react] Immer로 상태관리하기

🐥 Immer는 리액트 상태관리 라이브러리이다.

Immer를 왜 사용할까?

• 리액트는 immutable한 속성을 가지고 있다.
  즉 이전 상태의 객체와 새로운 상태의 객체의 참조값이 달라야한다.
  따라서 아래의 코드와 같이 useState를 이용하여 기존 값을 스프레드 연산자 ... 을 통해 복사하고 새로운 값을 추가하여 새로운 객체를 리턴해주는 방식으로 만들어야하는데..

---

// 기존의 추가하는 방법
setData((data) => ({
            ...data,
            inner: { ...data.inner, newData },
          }));

이런 식의 코드는 데이터의 구조가 조금 까다로워지면 불변성을 지켜가면서 새로운 데이터를 생성해내기가 복잡해진다.
하지만 Immer를 이용하면 mutable한 것처럼 코드를 작성할수 있다.

🐥 Immer 사용법

yarn add immer use-immer  // immer와 use-immer를 설치

기존 useState대신 useImmer를 사용한다

const [data, updateData] = useImmer(initialData);

추가 하는 방법

updateData((data) =>  {
     data.inner.push({name,age})
   });

수정 하는 방법

findName = 'name'
updateData((data) =>  {
    const inner = data.inner.find(v=> v.name === findeName);
    inner.name = newName; // 기존 값에 새로운값을 대입해주는 방식
    inner.age = newAge
  });

🐥 마치며

이처럼 Immer를 사용하면 새로운 객체로 리턴하기위해 기존 값을 복사하는 과정을 없애고
push , splice 등 원본에 영향을 미치는 내장함수를 사용하여 간단하게 상태관리를 할수 있어서 복잡한 구조를 가진 상태를 관리할때 용이하다.