불변성

불변성

불변성이란 기존의 값을 그대로 유지하면서 새로운 값을 추가하는 것으로
객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다.

불변성은 React에서 리렌더링하는 시기를 결정하는데 순수 컴포넌트를 만들 수 있게 하며 변하지 않는 데이터는 변경이 이루어졌는지 쉽게 판단할 수 있다.

const [state, setState] = useState(
  {
    id: 1, 
    name: stan
  }
);

setState({
  ...state,
  nickName: beda
})

• Spread 연산자를 이용해 객체나 배열의 값을 복사할때는 얕은 복사를 하게 된다.

• 이렇게 불변성을 유지함으로써 side-effect가 줄어들고 컴포넌트 최적화가 가능하다.

하지만 불변성을 계속 유지하려고 하면 코드가 길어지고 구조의 깊이가 깊어질수록 상태는 접근조차 어려워질 수 있다.

이러한 문제를 해결하기 위해 불변성을 유지시켜주면서 코드를 단순하고 직관적으로 짤 수 있는 라이브러리가 있다.

Immer

Immer은 Immutable과 같이 불변성을 유지를 편리하게 해 주는 라이브러리다.

Immer.js 를 설치해 준다.

yarn add immer

import produce from "immer"; 

const [state, setState] = useState(
  {
    id: 1, 
    name: stan
  }
);

setState(produce(state, draft => {
  draft.nickName = beda;
}))

produce에는 두가지 파라미터가 존재하는데

• 첫번째 파라미터는 적용 대상인 state,
• 두번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수를 넣어준다.

이처럼 Immer 라이브러리는 확실히 간단하다.
복잡한 데이터 구조의 불변성을 유지하면서 업데이트때 Immer를 사용하는 것을 추천한다.