(TIL 17일차) React (6)

빡기·2020년 2월 13일

TIL(Today I Learned)

목록 보기

10/43

Immer 라이브러리

기존의 배열이나 객체를 변경할 때 직접 수정이 아닌 불변성을 지켜주면서 변경함
Ex) push,splice 사용 X, concat,filter,map O
그러나 배열이나 아래와 같이 객체의 구조가 복잡해지면 원하는 요소에 접근하기 힘듦

const state = {
  posts: [
    {
      id: 1,
      title: '제목입니다.',
      body: '내용입니다.',
      comments: [
        {
          id: 1,
          text: '와 정말 잘 읽었습니다.'
        }
      ]
    },
    {
      id: 2,
      title: '제목입니다.',
      body: '내용입니다.',
      comments: [
        {
          id: 2,
          text: '또 다른 댓글 어쩌고 저쩌고'
        }
      ]
    }
  ],
  selectedId: 1
};
// 원하는 요소 접근하기 힘듦(코드 복잡도 올라감)
const nextState = {
  ...state,
  posts: state.posts.map(post =>
    post.id === 1
      ? {
          ...post,
          comments: post.comments.concat({
            id: 3,
            text: '새로운 댓글'
          })
        }
      : post
  )
};

이러한 문제를 해결해주는 ⭐Immer⭐ 라이브러리❗

const nextState = produce(state, draft => {
  const post = draft.posts.find(post => post.id === 1);
  post.comments.push({
    id: 3,
    text: '와 정말 쉽다!'
  });
});
// 훨씬 간단하게 접근 가능

상태 업데이트 시 불변성을 신경쓰지 않으면서 업데이트를 해주면 Immer가 불변성 관리 담당

Immer 사용법

immer 라이브러리 설치

npm i immer --save

보통 produce라는 이름으로 import 해줌

import produce from 'immer';

produce 함수 첫번째 파라미터는 수정하고 싶은 상태, 두번째 파라미터는 어떻게 업데이트하고 싶은지 정의 하는 함수 작성

const state = {
  number: 1,
  dontChangeMe: 2
};

const nextState = produce(state, draft => {
  draft.number += 1;
});

console.log(nextState);
// { number: 2, dontChangeMe: 2 }

리듀서에서 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 = {
  text: 'Hello',
  done: false
};

const updater = produce(draft => {
  draft.done = !draft.done;
});

const nextTodo = updater(todo);

console.log(nextTodo);
// { text: 'Hello', done: true }
// 아래와 같은 의미
const [todo, setTodo] = useState({
  text: 'Hello',
  done: false
});

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