Dust

reduce

const sum = numbers.reduce((a, b) => a + b);
// 주어진 상태를 고쳐나가는 함수(현재 상태를 새로운 상태로 변경할 때 씀)
// [주어진상태].reduce([특정규칙] => 변경된 상태)

useMemo, useCallback은 리액트 렌더링 성능 최적화를 위한 Hook

useMemo

- 특정 결과값을 재사용 할 때 

- 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있음

- 코드 예시 color, movie의 값이 변경될 때마다 재선언

useMemo 사용 전

// Info.tsx
import React from "react";

const getColor = (color) => {
    (내용)
};
const getMovie = (movie) => {
    (내용)
}

const Info = ({ color, movie }) => {
  const color = getColor(color);
  const movie = getMovie(movie);
  
  return <div> ~ <div>;
};

// Memo.tsx
import React, { useState } from "react";

const Memo = () => {
  const [color, setColor] = useStete('');
  const [movie, setMovie] = useState('');
  
  const onChange = e => {
    if (e.target.id === "color") setColor(e.target.value);
    else setMovie(e.target.value);
    
    return <div> ~ <div>;
  };

const memoizedValue = useMemo(() => somputeExpensiveValue(a, b), [a, b]);
// const 변수 = useMemo(() => 변수(a, b), [a, b]);

useMemo 사용 후

// Info.tsx
import React, { useMemo } from "react";

const getColor = (color) => {
    (내용)
};
const getMovie = (movie) => {
    (내용)
}

const Info = ({ color, movie }) => {
  const color = useMemo(() => getColor(color), [color]);
  const movie = useMemo(() => getMovie(movie), [movie]);
  
  return <div> ~ <div>;
};

useCallback

- useMemo와 비슷한 함수

- 렌더링 성능을 최적화할 때 사용

- 특정 함수를 새로 만들지 않고 재사용하고 싶을 때

- 위에 useMemo는 color, movie의 값이 변경될 때마다 재선언 했지만 Callback은 첫 마운트 될 때 한번만 선언하고 재사용

참고

https://leehwarang.github.io/2020/05/02/useMemo&useCallback.html

~ 공부중 ~