[react] React 최적화 성능개선 데이터 관리 - 10년 된 태블릿에서도 빠르게 돌려보자.

서비스하고 있는 시스템에서 성능문제로 컴플레인을 받았다.

데이터를 처리하는 기능이 느리다는 문제였고, 사용기기를 확인하니 2014년에 출시한 갤럭시 탭4.7.. 🤣

 

useMemo, memo, shouldcomponentupdate, componentdidupdate, useCallback 등...

렌더링 관련 최적화는 모두 적용했는데도 느리다면?

렌더링 최적화가 아닌 데이터 사용방식을 최적화하면서 느낀 부분을 정리합니다.

1분 로딩에서 1초 로딩으로 ㄱㄱㄱ

 

---

 

# Redux는 최대한 작은 데이터만 관리

 

# SQLite는 바보다. 실행계획 잘 살피고, 트랜잭션 최소한으로 사용하자.

 

# 꼭 필요한 곳만 새 객체 만들기

// 😋
const list_a = [1, 2, 3, 4, 5];
list_a.push(6);

// 🤬
let list_b = [1, 2, 3, 4, 5];
list_b = [...list_a, 6];

 

# immutable 핸들링 성능 순서

1. immer의 produce - 변경 객체만 깊은 복사.
2. lodash의 cloneDeep - 전부 깊은 복사
3. JSON.parse(JSON.stringify())
   • 쓸데없는 문자열화 등 불필요한 낭비
   • {a:1,b:2} & {b:2,a:1} 다른 객체로 다룸.
   • 데이터 크기가 클 수록 성능 심각...100배 이상 차이난다...

 

# immer는 정말 필요한 곳에만 쓰자.

immer의 produce 가 가장 빠른 이유는?

깊은 복사를 할 때 변화된 객체만 새롭게 만들어주는 기능이 immer에 내장되어 있기 때문이다.

하지만 immer로 만든 객체를 직접 수정할 경우 예상할 수 없게 변경된다.

immer로 만든 객체는 계속 immer 로만 변경해야 안전하고 이런 부분이 단점.

import produce from 'immer';

const objA = {
  aaa: { bbb: 'show me the money.' },
};

const objB = produce(objA, (draft) => {
  draft.aaa.bbb = 'show me the brain.';
});

// immer로 만든 객체를 아래와 같이 
// 불변객체를 직접 변경하면 의도한대로 되지 않는 경우가 발생하기도 한다.
objB.aaa.bbb = 'Nope!!!';

// 아래와 같이 immer를 사용해 수정해줘야 안정적으로 변경된다.
// immer만 사용할게 아니면 프로젝트 내에서 immer 객체를 추적해야하는 불편함..
// 프로젝트 크기가 커질수록 혼란스러웠다.
const objC = produce(objB, (draft) => {
  draft.aaa.bbb = 'Yes!!!';
});

 

# 검색이 잦은 객체는 잘 정규화해서 쓰자

// BAD 👿
const posts = [
  {
    id: 'post1',
    author: 'user1',
    body: '......',
    comments: ['comment1', 'comment2'],
  },
  {
    id: 'post2',
    author: 'user2',
    body: '......',
    comments: ['comment3', 'comment4', 'comment5'],
  },
];

// GOOD 😁
const posts = {
  byId: {
    post1: {
      id: 'post1',
      author: 'user1',
      body: '......',
      comments: ['comment1', 'comment2'],
    },
    post2: {
      id: 'post2',
      author: 'user2',
      body: '......',
      comments: ['comment3', 'comment4', 'comment5'],
    },
  },
  allIds: ['post1', 'post2'],
};