[07-React] 6-7. React Hook :: useMemo, React.memo

7. useMemo

: 비싼 계산에 대한 결과를 저장(메모리제이션)하고, 의존성 배열을 트리거로 하여 변화가 없으면 저장된 값 반환

: 일반적으로 "값" 에 대한 저장

const cachedValue = useMemo(calculateValue, dependencies)

1. 첫번째 인수로는 값을 반환하는 생성 함수
   - 단순한 연산 결과만 아니라 컴포넌트 또한 포함한다.
2. 두번째 인수로는 의존하는 값의 배열

  // useMemo를 사용하여 필터링된 리스트를 캐싱
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.toLowerCase().includes(filterText.toLowerCase()));
  }, [filterText, items]); // filterText 또는 items가 변경될 때만 필터링 실행

---

7-1. React.memo

: 자식 컴포넌트는 부모 컴포넌트에 종속 -> 값 변화가 없어도 부모의 리렌더링 시, 자식도 리렌더링

: 의미 없는 자식의 렌더링을 막기 위해 -> "컴포넌트"를 저장(메모리제이션)

: 종속된 props를 비교(* 일반적으로 얕은 비교)하여 리렌더링 여부를 결정

: PureComponent와 비슷하게 동작하지만 함수형 컴포넌트에서 사용됨

: 생각 없는 사용은 메모리 이슈를 초래....

// Ex -부모 컴포넌트
const Parent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>증가</button>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="이름 변경"
      />
    </div>
  );
};

// Ex - 자식 컴포넌트

const Child = React.memo(({ count }) => {
  console.log('Child 컴포넌트가 리렌더링되었습니다.');
  return <div>Count: {count}</div>;
});

const Child = React.memo(
  ({ count, user }) => {
    console.log('Child 컴포넌트가 리렌더링되었습니다.');
    return (
      <div>
        <div>Count: {count}</div>
        <div>User: {user.name}</div>
      </div>
    );
  },
  (prevProps, nextProps) => {
    // 특정 props에 대한 정교한 비교
	// count 값이 동일하면 리렌더링하지 않음
    return prevProps.count === nextProps.count && prevProps.user.name === nextProps.user.name;
  }
);

---

참고

ASAC 수업자료

모던 리액트 Deep Dive

https://ko.react.dev/reference/react/useMemo

useMemo – React