[React.js] 최적화

최적화란?

웹 서비스의 성능을 개선하는 모든 행위를 일컫음

아주 단순한 것부터 아주 어려운 방법까지 매우 다양함

 

일반적인 웹 서비스 최적화 방법

서버의 응답속도 개선

이미지,폰트,코드 파일 등의 정적 파일 로딩 개선

불필요한 네트워크 요청 줄임 . .

 

React App 내부의 최적화 방법

컴포넌트 내부의 불 필요한 연산 방지

컴포넌트 내부의 불 필요한 함수 재생성 방지

컴포넌트의 불 필요한 리렌더링 방지

 

 

최적화를 언제하면 좋은지?

1. 기능 구현
2. 최적화

 

어떤 것들이 최적화 대상이 되는가?

1. 유저의 행동에 따라 개수가 굉장히 많아질 수 있는 컴포넌트
2. 함수를 굉장히 많이 가지고 있는 컴포넌트
3. 최적화가 꼭 필요한 것에만 해주기! (사소한 것은 제외) 

---

useMemo

"메모이제이션" 기법으로 불 필요한 연산을 최적화 하는 리액트 훅 

 

const { totalCount, doneCount, notDoneCount } =
    useMemo(() => {
      console.log("getAnalyzedData 호출!");
      const totalCount = todos.length;
      const doneCount = todos.filter(
        (todo) => todo.isDone
      ).length;
      const notDoneCount = totalCount - doneCount;

      return {
        totalCount,
        doneCount,
        notDoneCount,
      };
    }, [todos]);
  // 의존성배열 : deps

 

 

React.memo

리액트 내장함수

고차 컴포넌트(HOC)

컴포넌트를 인수로 받아 , 최적화됨 컴포넌트로 만들어 반환 

 

개발자도구 - Components - 설정

여기서 하이라이트 체크박스를 켜주면 리렌더링 되는 컴포넌트를 확인할 수 있음 

이걸로 동작하면서 리렌더링되는 컴포넌트를 확인하고, 리렌더링이 필요없는 항목들을 memo 메서드를 사용하여 불필요하게 리렌더링 되지 않도록 할 수 있음

import "./Header.css";
import { memo } from "react";

const Header = () => {
  return (
    <div className="Header">
      <h3>오늘은 📆</h3>
      <h1>{new Date().toDateString()}</h1>
    </div>
  );
};

const memoizedHeader = memo(Header);

export default memoizedHeader;

import "./Header.css";
import { memo } from "react";

const Header = () => {
  return (
    <div className="Header">
      <h3>오늘은 📆</h3>
      <h1>{new Date().toDateString()}</h1>
    </div>
  );
};

export default memo(Header);

 

 

단축해서 사용해도 무관

 

객체가 props로 왔을때는 얕은 비교를 하기때문에 값이 계속 바뀌었다고 인식하는 경우가 있어서

아래와 같이 직접 어떤 상황에서 리렌더링을 시킬건지 적용할 수 있음 

(하지만 번거로운 상황이 발생하기때문에 아래의 useCallback 라는 리액트 훅을 이용하면 좋음) 

export default memo(TodoItem, (prevProps, nextProps) => {
  // 반환값에 따라, Props가 바뀌었는지 안바뀌었지 판단
  // T -> Props 바뀌지 않음 -> 리렌더링 X
  // F -> Props 바뀜 -> 리렌더링 O

  if (prevProps.id !== nextProps.id) return false;
  if (prevProps.isDone !== nextProps.isDone) return false;
  if (prevProps.content !== nextProps.content) return false;
  if (prevProps.date !== nextProps.date) return false;

  return true;
});

 

 

useCallbak

불 필요한 함수 재생성 방지

 

마운트됐을 때 한번만 생성하고 리렌더링 되지 않도록 적용 

  const onCreate = useCallback((content) => {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        isDone: false,
        content: content,
        date: new Date().getTime(),
      },
    });
  }, []);

  const onUpdate = useCallback((targetId) => {
    dispatch({
      type: "UPDATE",
      targetId: targetId,
    });
  }, []);

  const onDelete = useCallback((targetId) => {
    dispatch({
      type: "DELETE",
      targetId: targetId,
    });
  }, []);

 

 

아티클 

"When to use useMemo, useCallback"

https://goongoguma.github.io/2021/04/26/When-to-useMemo-and-useCallback/

When to useMemo and useCallback (번역)