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에 대해서 같은 결과를 리턴하는 컴포넌트
• 다수의 엘리먼트를 출력하는 컴포넌트