react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 불변성이란?

• 메모리 영역에서의 값이 변경될 수 없는 특징을 말한다.
• 기본 자료형은 메모리 영역에 데이터가 할당된 이상 그 영역의 값은 바뀌지 않는다.
• 반면, 참조 자료형은 프로퍼티가 존재하여 프로퍼티의 값을 얼마든지 바꿀 수 있다.
• 프로퍼티도 메모리 영역에 할당되어 일종의 데이터를 저장하는 변수라고 볼 수 있다.
• 변수에 할당되는 값은 바꿀 수 있기 때문에 프로퍼티에 대한 값도 바뀔 수 있다.
  참고: Data type

📌 React에서 불변성을 지켜야 하는 이유

• state가 변경되었는지 감지하기 위해 react는 얕은 비교를 수행한다.

  💡 얕은 비교
  실제 내부 값을 비교하는 것이 아니라 메모리 주소값(참조값)을 비교하는 것을 말한다. 얕은 비교는 계산 리소스를 줄여주기 때문에 효율적으로 state를 업데이트 할 수 있다.

• 즉, state의 참조값을 바꾸지 않고 단순히 내부 프로퍼티의 값만 바꾸었다면 우리는 state가 바뀌었다고 생각히지만 리액트는 이전의 state와 같다고 인식하여 컴포넌트를 리렌더링하지 않는다.

💡 현재 state의 불변성을 지키면서 값을 업데이트해야 한다. (특히, 참조 자료형의 경우)
💡 새로운 참조값을 만들기 위해 사본을 만들고 그 사본에 값을 업데이트한 후, 그 사본의 상태를 setter 함수를 통해 업데이트한다.

📙 얕은 복사

• 스프레드 연산자의 경우 얕은 복사를 수행한다.
• 기존 객체의 프로퍼티 값을 복사하여 새로운 객체를 만든다.
• 하지만 만약 프로퍼티 값이 참조형 데이터의 경우 그 데이터가 참조하는 주솟값만 복사하게 된다.
• 그러면 전체적으로 봤을 때 불변성을 지키지 못한 것이다.

📙 깊은 복사

• 객체의 프로퍼티 중에서 그 값이 기본형 데이터일 경우에 그대로 복사하고, 참조형 데이터일 경우 다시 내부의 프로퍼티의 값들을 복사한다.

📌 immer 라이브러리

• immer 라이브러리를 사용하여 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해줄 수 있다.
• produce함수는 두 개의 인자를 받는다. 첫번째 인자는 수정하고 싶은 상태이고, 두번째 인자는 상태를 떻게 업데이트할지 정의하는 함수이다.
• 두번째 인자로 전달된 함수 내부에서 상태를 업데이트하면, produce 함수가 불변성 유지를 대신해주면서 새로운 상태를 반환한다.
• 이때 상태를 업데이트를 할 때 객체 안에 있는 값을 직접 수정하거나, 배열에 직접적인 변화를 일으키는 push, splice 등의 메서드를 이용해도 된다.

import produce from "immer";
const nextState = produce(originalStsate, draft => {
    // 바꾸고 싶은 값 바꾸기
})

✨ 함수형 업데이트

• 만약 produce 함수를 호출할 때, 첫 번째 인자가 함수 형태라면 업데이트 함수를 반환한다.
• 이러한 immer 속성과 useState의 함수형 업데이트를 함께 활용할 수 있다.