✏️ React Hooks 최적화 React.meno,useCallback,useMemo

React.meno

useCallback,

useMemo

 

meno : 컴포넌트를 캐싱

useCallback : 함수를 캐싱

useMemo : 값을 캐싱

 

meno란?

리- 렌더링의 발생조건중 3번째 경우, 즉 부모컴포넌트가 리렌더링되면 자식컴포넌트는 모두 리렌더링 된다는 뜻.

자녀 컴포넌트의 입장에서는 나는 바뀐게 없는데 다시 렌더링 되어야하는거지? 라고 생각할수있는데

그 부분을 돕는 도구가 바로 React.memo임.

 

useCallback 

React.memo는 컴포넌트를 메모이제이션 했으면, useCallback은 인자로 들어오는 함수 자체를 기억 (메모이제이션)한다. (함수를 기억한다)

useCallback는 의존성 배열 넣어줘야함.

useCallback(()=>{

},[]);

 

useMemo : value 함수가 리턴하는값, 값 자체 (값을 기억한다)

import useMemo 로 가지고옴

마찬가지로  의존성 배열 넣어줌.

const value = useMemo(()=>{

     return haevyWork()

},[])