22. Immer 를 사용한 더 쉬운 불변성 관리!

React 에서 배열/객체를 업데이트 할 때에는 직접 수정하면 안되고, 불변성을 지켜주면서 업데이트 해야한다.

// 좋지 않은 방법
const object = {
  a: 1,
  b: 2
};

object.b = 3;

// 좋은 방법
 const object = {
  a: 1,
  b: 2
};

const nextObject = {
  ...object,
  b: 3,
};

 

경우	(O) 좋은 방법 (O)	(X) 좋지 않은 방법 (X)
항목 추가	concat	push ()
항목 제거	filter	splice ()
항목 수정	map	n 번째 항목 직접 수정

 

# posts 배열 안의 id 가 1인 post 객체를 찾아서 comments 에 새로운 댓글 객체를 추가해주는 경우

const nextState = {
  ...state,
  posts: state.posts.map(post =>
    post.id === 1
      ? {
          ...post,
          comments: post.comments.concat({
            id: 3,
            text: '새로운 댓글'
          })
        }
      : post
  )
};

위와 같이 코드가 좀 복잡해지는 상황에서는 immer 라는 라이브러리를 사용하면 아래와 같이 간단하게 구현할 수 있다.

 

Immer 라이브러리를 이용한 불변성 관리

# Immer 는 상태를 업데이트 할 때 불변성 신경안쓰고 업데이트를 해주어도 Immer 가 불변성 관리를 대신 해준다.

​

# Immer 를 사용하기 위해서는 설치를 별도로 해주어야 한다.

yarn add immer

# Immer 를 사용하기 위해 보통 'produce' 의 이름으로 불러온다.

그리고 produce 함수의 첫 번째 파라미터는 '수정하고 싶은 상태', 두 번째 파라미터는 '업데이트를 정의하는 함수'이다.

(두 번째 파라미터 함수에서는 불변성 신경안쓰고 그냥 업데이트 하는 함수 구현해줘도 알아서 관리해준다.)

​

그래서 아까 봤던 예제를 immer 를 사용한 불변성 관리코드는 아래와 같다.

import produce from 'immer';

const nextState = produce(state, draft => {
  const post = draft.posts.find(post => post.id === 1);
  post.comments.push({
    id: 3,
    text: '와 정말 쉽다!'
  });
});

# 배열이 객체의 깊은 곳에 있지 않은 경우에 새 항목을 추가하거나 제거할 때는 Immer 를 사용하는 것보다

concat 과 filter 를 사용하는 것이 코드가 더 간결하고 편하다.

​

# Reducer 에서 Immer 사용해보기

function reducer(state, action) {
  switch (action.type) {
    case 'CREATE_USER':
      return produce(state, draft => {
        draft.users.push(action.user);
      });
    case 'TOGGLE_USER':
      return produce(state, draft => {
        const user = draft.users.find(user => user.id === action.id);
        user.active = !user.active;
      });
    case 'REMOVE_USER':
      return produce(state, draft => {
        const index = draft.users.findIndex(user => user.id === action.id);
        draft.users.splice(index, 1);
      });
    default:
      return state;
  }
}

# Immer 와 함수형 업데이트

​

※ 함수형 업데이트 복습

const [todo, setTodo] = useState({
  text: 'Hello',
  done: false
});

const onClick = useCallback(() => {
  setTodo(todo => ({
    ...todo,
    done: !todo.done
  }));
}, []);

setTodo 함수에 업데이트 함수를 넣음으로써 useCallback 의 두 번째 파라미터(deps) 에 todo 를 넣지 않아도 되었다.

useCallback 의 두 번째 파라미터 (deps) 에 상태 값 안넣어도 되는 방법 = setter 함수에 업데이트 함수 넣기

이런 경우에도 Immer 를 사용하면 더 편리하다.

produce 함수에 두 개의 파라미터를 모두 넣어주면 반환되는 값은 새로운 상태이다.

produce 함수에 첫 번째 파라미터를 생략하고, 업데이트 함수만 넣어주면 반환 값은 상태를 업데이트해주는 함수가 된다.

​

따라서 setter 함수에 produce 함수만 넣어주면 불변성 관리가 될 것이다.

// produce 쓰지 않고, setter 함수에 그냥 업데이트 함수를 넣은 방법
const onClick = useCallback(() => {
  setTodo(todo => ({
    ...todo,
    done: !todo.done
  }));

// setter 함수에 produce 함수를 넣은 방법
const onClick = useCallback(() => {
  setTodo(
    produce(draft => {
      draft.done = !draft.done;
    })
  );
}, []);

Immer 는 편한 라이브러리지만, 성능적으로보면 Immer 를 사용하지 않은 코드가 더 빠르다.

사실 Immer 를 사용한다고 해서 사용자가 실제 인지할 수 있는 딜레이는 굉장히 미미하다.

그러나 Immer 에서 사용하고 있는 JavaScript 엔진의 Proxy 기능은 구형 브라우저나 react-native 환경에서는 지원되지 않아서

ES5 fallback (Proxy 처럼 작동은 하지만 Proxy 는 아니다) 을 사용한다.

​

ES5 fallback 을 사용하는 경우에는 그 딜레이가 더 커지는데, 이 또한 굉장히 미미한 수준이다.

따라서 데이터의 구조가 복잡해지는 것부터 일단 방지를 하고, 어쩔 수 없이 데이터 구조가 복잡해지는 경우에만 Immer 를 사용해야 한다.

(최대한 사용 안하는 쪽으로...)

---

출처 : https://react.vlpt.us/basic/23-immer.html

23. Immer 를 사용한 더 쉬운 불변성 관리 · GitBook