# useMemo
- Memoization : 동일한 값을 리턴하는 함수를 반복적으로 호출 해야할 때 자주 쓰는 값을 맨 처음 계산을 해둬서 그 값이 필요할 때 마다 다시 계산을 하는게 아니라 저장해둔곳에서 꺼내서 사용하는것
- 함수형 컴포넌트 렌더링 → component 함수 호출 → 모든 내부 변수 초기화 ☞ 이렇게 되면 무거운 일을 할 때 무의미한 반복이 계속 되서 성능이 떨어질 수 있다.
- useMemo를 사용하면? 렌더링 → component 함수 호출, Memoization → 렌더링 → component 함수 호출, Memoize 된 값을 재사용
const value = useMemo (() => {
return calculate();
}, [item]);
- 첫번째 인자는 콜백함수 ☞ 우리가 Memoization 할 값을 계산해서 return 해주는 함수, 콜백함수가 return하는 값이 useMemo가 return하는 값
- 두번째 인자 ☞ 의존성 배열이라고도 불리는 배열, useMemo는 배열안에 값이 업데이트 될 때만 콜백함수를 다시 호출해서 Memoization 된 값을 업데이트해서 다시 Memoization 해준다.
- [] 빈배열을 넘겨주면 맨 처음 마운트 되었을 때만 값을 계산하고 이후에는 항상 Memoization 된 값을 꺼내와서 사용
- 값이 오브젝트일때 useMemo를 사용해서 초기화 되는것을 막아준다
useMemo 꼭 필요할 때만!
- 무분별하게 남용하면 성능에 무리가 갈수있다.
- useMemo를 사용한다는건 값을 재활용하기 위해서 따로 메모리를 소비해서 저장을 해놓는건데 불필요한것까지 모두 Memoization 성능에 좋지 않을 수 있다.
📌 참고
별코딩 | 리액트 훅스 시리즈
'Front-end > React' 카테고리의 다른 글
[React] 컴포넌트 최적화 - React.memo (0) | 2023.02.28 |
---|---|
[React] React Hooks : useCallback (0) | 2023.02.27 |
[React] React Hooks : useContext (0) | 2023.02.22 |
[React] React Hooks : useEffect (0) | 2023.02.20 |
[React] React Hooks : useRef (0) | 2023.02.19 |