Immer 라이브러리는 왜 쓸까?

 

React + JS에서 객체 업데이트를 해야한다면,

**이렇게 말고**
setPerson({
  firstName: e.target.value, // New first name from the input
  lastName: person.lastName,
  email: person.email
});

**이렇게**
setPerson({
  ...person, // Copy the old fields
  firstName: e.target.value // But override this one
});

 

불변객체이기 때문에 직접 넣어 줄 수 없다.  

... 문법을 써야한다. 

 

여기까지는 크게 불편하지 않는데, 객체 안에 객체가 있는 중첩 형태라면 꽤 귀찮아진다. 

 

const [person, setPerson] = useState({
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: '<https://i.imgur.com/Sd1AgUOm.jpg>',
  }
});

person.artwork.city = 'New Delhi'; << 불변임으로 이렇게 직접 바꾸는건 불가능

const nextArtwork = { ...person.artwork, city: 'New Delhi' };
const nextPerson = { ...person, artwork: nextArtwork };
setPerson(nextPerson);

혹은

setPerson({
  ...person, // Copy other fields
  artwork: { // but replace the artwork
    ...person.artwork, // with the same one
    city: 'New Delhi' // but in New Delhi!
  }
});

이렇게 해야함. 얕은 복사-> 한단계만 복사 되므로 중첩된건 중첩안에서 또 따로 처리 
너무 장황함.

 

너무 장황해지는 문제를 해결하기 위해

immer 라이브러리를 쓰게 된다.

**immer** -> 중첩된 라이브러리 매우 간편 
updatePerson(draft => {
  draft.artwork.city = 'Lagos';
});

 

마치 '직접' 대입해서 '적용' 된 것 처럼 보인다.

그래서 사용하면 코드가 매우 간결해지고 좋아진다.

 

다만,  "불변객체에 직접 '대입'하는게 가능하다 "로 착각만 하지 않으면 될 것 같다.