렌더링 최적화

우리가 프로젝트를 하다보면 파일이 너무 커지게 된다.
그러면 리액트 특성상 렌더링에 부하가 걸리게 되는데 이를 최적화엔 세가지 방법이 있다
리액트 리렌더링 조건

useMemo

컴포넌트를 렌더링할 때 업데이트가 필요없는 불필요한 컴포넌트까지 같이 리렌더링되는 경우가 있는데 이러면 성능이 떨어지게 된다 그걸 방지하고 최적화하기 위해 사용되는 것이 useMemo이다
즉 주로 성능을 최적화하는 상황에서 사용되며, 연산된 값을 렌더링 시 재사용할 때 쓰인다

사용법

const test = useMemo(() => testMemo(Deps), [Deps]);

첫번재 파라미터는 함수형이 오며, 두번째 파라미터는 Deps를 넣어줌
Deps에 넣어주는 값이 바뀔때만 첫번째 파라미터의 함수가 실행됨

예제

import React, { useState, useRef, useMemo } from "react";

// useMemo 관련 함수
function countActiveUsers(users) {
  console.log("활성 사용자 수를 세는중...");

  return users.filter((user) => user.active).length;
}

function App() {
  // 생략

  const [users, setUsers] = useState([
    {
      id: 1,
      username: "kaen",
      email: "kusdsuna@naver.com",
      active: true,
    },
    // 생략
  ]);

  // 생략

  // useMemo 결과값
  const count = useMemo(() => countActiveUsers(users), [users]);

  return (
    <>
      // 생략
      {/* 사용자에게 보일 결과값 */}
      <div>활성 사용자 수: {count}</div>
    </>
  );
}
export default App;

useMemo는 특정 값이 바뀌었을 때만 특정 함수를 실행해서 연산을 수행하며,
바뀌지 않았을 때는 리렌더링시에 이전에 만들었던 값을 재사용

React.memo

컴포넌트 props가 바뀌지 않았다면 리렌더링을 방지해줌, 즉 필요한 상황에서만 리렌더링 됨

사용법

React.memo(component);

예시

const TestComponenet = React.memo(function Component(props) {
  {
    return "props를 사용해서 렌더링";
  }
});

특정 상황에서 사용됨

• 자주 렌더링 되는 컴포넌트
• 주어진 props에 대해서 같은 결과를 리턴하는 컴포넌트
• 다수의 엘리먼트를 출력하는 컴포넌트

참조

https://kaen7.github.io/2021-01/useMemo
https://student513.tistory.com/76