memoization - 렌더링 할 필요없게 메모해두는 것.
1.React.memo: 컴포넌트를 캐싱
2.useCallback: 함수 자체를 캐싱
3.useMemo: 객체, 배열, 실행된 함수의 값을 캐싱
리렌더링은 일어날수록 안 좋다!
렌더링은
state변경 시 / props 변경 시 / 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트들도 무조건 리렌더링
총 3가지 경우에 일어남
-> 최적화를 시켜줘야 불필요한 리렌더링을 막을 수 있다.
1. React.memo
부모컴포넌트에 값이 변경돼서 리렌더링됐을 때 자식컴포넌트가 불필요하게 리렌더링되는 것을 막는다.
렌더링이 필요할 땐 알아서 잘 된다.
export default React.memo(자식컴포넌트)import React from 'react';
import { memo } from 'react';
export default memo(자식컴포넌트)캐쉬메모리는 무조건 다 써준다고 최적화에 좋은 것은 아니다.
그래서 모든 자식 컴포넌트에 쓰지 말고 정말 최적화가 필요한(리렌더링 일어나면 안되는) 무거운 컴포넌트에서만 쓰기를 권장한다.
2. useCallback
함수를 props로 내려줄 때, 그 함수는 state를 변경하지 않는데도,
부모컴포넌트에서 그 함수를 쓰면 props가 변경됐다고 인식해서 그 함수를 받은 자식컴포넌트도 같이 리렌더링 된다.
( 자바스크립트가 객체를 저장할 땐 값의 주소를 저장하기 때문에 같은 내용의 객체가 여러개여도 다 다르다. )
함수도 객체이므로 동작하면 함수의 내용은 달라지지 않는데도 주소값이 달라지기 때문에 값이 달라졌다고 본다.
useCallback(()=>{},[의존성 배열.])의존성 배열을 비워두면 최초 한 번 렌더링됐을 때.
값을 넣어주면 그 값이 바뀔 때만 렌더링.
이것도 캐쉬메모리이므로 원래 프롭스 변경이 자주 일어나는 컴포넌트이면 안 쓰는게 좋다.
3. useMemo
객체, 배열, 함수의 '값'을 캐싱한다.
// 함수 그 자체 X, 함수가 실행된 값 O
useMemo(()=>{return 반환할 함수()}, [])렌더링 될 때 마다 무거운 연산을 해서 렌더링 속도가 느려진다면
다시 실행될 필요 없는 함수는 실행된 값을 기억해두고 실행되지 않도록 한다.
