useMemo, useCallback

• 참고 블로그 : https://leehwarang.github.io/2020/05/02/useMemo&useCallback.html https://ui.toast.com/weekly-pick/ko_20190731 ← 추천! https://crmrelease.tistory.com/41 ← 추천! ( useMemo, useCallback, React.memo )

서론

알고 가야 할 것

1. 함수형 컴포넌트는 그냥 함수다.  다시 한 번 강조하자면 함수형 컴포넌트는 단지 jsx를 반환하는 함수이다.

2. 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여서 실행되는 것을 말한다. 함수(컴포넌트)가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수 등)도 매번 다시 선언되어 사용된다.

3. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다. (심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링 되는게 기본이다. )

적용 안한 경우

useMemo

import React, { useMemo } from "react";

const colorKor = useMemo(() => getColorKor(color), [color]);
const movieGenreKor = useMemo(() => getMovieGenreKor(movie), [movie]);

import react, { useMemo } from "react";

const User = (props) => {
  console.log("자식");

  // //일반적인 방식
  // const naem = setNameTag(props.name);
  // const age = setAgeTag(props.age);

  //useMemo 적용
  const name = useMemo(() => setNameTag(props.name), [props.name]);
  const age = useMemo(() => setAgeTag(props.age), [props.age]);

  return (
    <div>
      <h1>{name}</h1>
      <h1>{age}</h1>
      <div>
        <input type="text" onChange={(e) => props.onChangeName(e)} />
      </div>

      <div>
        <input type="text" onChange={(e) => props.onChangeAge(e)} />
      </div>
    </div>
  );
};

React.memo()가 적절한 순간

/*
** 예시
** React.memo()가 적용되지 않은 컴포넌트
*/
export function Movie({ title, releaseDate }) {
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}

/*
** 예시
** React.memo()로 감싼 Moview 컴포넌트
*/
export const MemoizedMovie = React.memo(Movie);

/*
** 예시
** Movie 컴포넌트를 자식으로 가지는 컴포넌트
*/
function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    <div>
      <Movie title={title} releaseDate={releaseDate} />
      Movie views: {views}
    </div>
  );
}

/*
** 예시
** 매 초마다 서버로부터 데이터를 polling 받아서 MovieViewsRealtime를 업데이트 하는 경우
*/

// Initial render
<MovieViewsRealtime
  views={0}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>

// After 1 second, views is 10
<MovieViewsRealtime
  views={10}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>

// After 2 seconds, views is 25
<MovieViewsRealtime
  views={25}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>

/*
** 예시
** Movie 컴포넌트를 자식으로 가지는 컴포넌트
*/
function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    <div>
      <MemoizedMovie title={title} releaseDate={releaseDate} />
      Movie views: {views}
    </div>
  );
}

React.memo()를 사용하지 말아야 하는 경우

• 렌더링될 때 props가 다른 경우가 대부분인 컴포넌트의 경우
• 메모이제이션 기법의 이점을 얻기 힘들다.
• 불필요한 props 비교 과정만 추가된 것일 뿐 성능상의 이점을 가져오지 못한다.
1. 이전 props와 다음 props가 다른지 검사하지만 false가 나와 2번을 수행함.
2. React는 이전 렌더링 내용과 다음 렌더링 내용이 달라졌는지 비교

• 클래스 기반의 컴퍼넌트를 React.memo()로 래핑하는것은 적절하지 않다.
• PureComponent를 확장하여 사용하거나, 
• shouldComponentUpdate() 메서드를 구현하는 것이 적절하다.

useCallback

import React, { useState, useCallback } from "react";

const onChangeHandler = useCallback(e => {
    if (e.target.id === "color") setColor(e.target.value);
    else setMovie(e.target.value);
  }, []);

useCallback()이 유용한 순간

This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

함수의 특징

function sumFactory() {
  return (a, b) => a + b;
}

const sum1 = sumFactory();
const sum2 = sumFactory();

console.log(sum1 === sum2); // => false
console.log(sum1 === sum1); // => true
console.log(sum2 === sum2); // => true

예시 코드

function Logout({ username, onLogout }) {
  return <div onClick={onLogout}>Logout {username}</div>;
}

const MemoizedLogout = React.memo(Logout);

function MyApp({ store, cookies }) {
  return (
    <div className="main">
      <header>
        <MemoizedLogout
          username={store.username}
          onLogout={() => cookies.clear()} // 매번 다른 콜백 함수의 인스턴스를 전달하게 됨
        />
      </header>
      {store.content}
    </div>
  );
}

const MemoizedLogout = React.memo(Logout);

function MyApp({ store, cookies }) {
  const onLogout = useCallback(() => {
    cookies.clear();
  }, []);

  return (
    <div className="main">
      <header>
        <MemoizedLogout username={store.username} onLogout={onLogout} />
      </header>
      {store.content}
    </div>
  );
}

useCallback 예시코드 2

import react, { useState, useMemo, useCallback } from "react";
import "./styles.css";

export default function App() {
  console.log("부모!");

  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  let count = 0;

  //기존 유저 이름 변경 함수
  const onChangeName = (e) => {
    console.log("onChangeName count 값 : ", count); // 매번 0 출력됨

    count++;

    const data = e.target.value;
    console.log("data : ", data);

    setName(data);
  };

  //useCallback 사용
  const onChangeAge = useCallback((e) => { 
    console.log("onChangeAge count 값 : ", count); // 0, 1, 2, 3, 4, ... 
    count++;

    const age = e.target.value;
    console.log("age : ", age);

    setAge(age);
  }, []);

  return (
    <div className="App">
      <h1>부모 컴포넌트</h1>

      <User
        name={name}
        age={age}
        onChangeName={onChangeName}
        onChangeAge={onChangeAge}
      />
    </div>
  );
}

React.memo()

리렌더링 빈도 확인하기

결론