Todo List성능 최적화 #08_immer 사용으로 불변성 유지

Todo List 만들어놓은 것을 최적화 하지는 않지만
immer 사용으로 불변성 유지하는 것을 알아놓으면 최적화 작업시 좋을듯 해서 기록함.

immer 사용을 위해서는 설치를 해줘야한다.

$ yarn create react-app immer-practice
$ cd immer-practice
$ yarn add immer

react 프로젝트를 생성하고, 프로젝트 경로로 이동해서 설치를 해주면 된다.

immer 사용 방법

import produce from 'immer';
const nextState = produce(originalState, draft => {
  // 바꾸고 싶은 값 바꾸기
  draft.somewhere.deep.inside = 5;
})

nextState에서 produce함수에 parameter2개가 입력됨.
첫번째 parameter는 바꾸고자 하는 대상, 두번쨰는 어떻게 바꿀것인지임.

todo에서 immer 사용

import produce from ‘immer‘;


const originalState = [
  {
    id: 1,
    todo: ‘전개 연산자와 배열 내장 함수로 불변성 유지하기‘,
    checked: true,
  },
  {
    id: 2,
    todo: ‘immer로 불변성 유지하기‘,
    checked: false,
  }
];



const nextState = produce(originalState, draft => {
  // id가 2인 항목의 checked 값을 true로 설정
  const todo = draft.find(t => t.id === 2); // id로 항목 찾기
  todo.checked = true;
    // 혹은 draft[1].checked = true;



// 배열에 새로운 데이터 추가
  draft.push({
    id: 3,
    todo: ‘일정 관리 앱에 immmer 적용하기‘,
    checked: false,
  });



// id = 1인 항목을 제거하기
  draft.splice(draft.findIndex(t => t.id === 1), 1);
});

App.js에서 immer 적용

import React, { useRef, useCallback, useState } from ‘react‘;
import produce from ‘immer‘;


const App = () => {
  const nextId = useRef(1);
  const [form, setForm] = useState({ name: “, username: “ });
  const [data, setData] = useState({
    array: [],
    uselessValue: null
  });



// input 수정을 위한 함수
  const onChange = useCallback(
    e => {
      const { name, value } = e.target;
      setForm(
        produce(form, draft => {
          draft[name] = value;
        })
      );
    },
    [form]
  );
  
  
  // 항목을 삭제하는 함수
  const onRemove = useCallback(
    id => {
      setData(
        produce(data, draft => {
          draft.array.splice(draft.array.findIndex(info => info.id === id), 1);
        })
      );
    },
    [data]
  );



return (…);
};



export default App;
  
  

immer를 사용하여 component 상태 작성시 객체 안의 값을 직접 수정하거나 배열의 변화를 주는 push, splice 등의 함수를 사용해도 됨.
immer를 사용한다고 무조건 간결해지는것은 아님.
onRemove의 경우 filter 내장함수를 사용하는게 더 깔끔해진다고 함.