React_07 ) useMemo와 useCallback
👉 useMemo
- 성능 최적화를 위하여 연산된 값을 재사용하는 기능을 가진 함수
- Memo = "memoized" = 이전에 계산 한 값을 재사용한다는 의미
useMemo
의
- 1) 첫번째 파라미터 = 어떻게 연산할지 정의하는 함수를 넣고,
- 2)두번째 파라미터 = deps 배열넣는다.
- 이 배열 안에 넣은 내용이 바뀌면, 등록한 함수를 호출해서 값을 연산해주고,
- 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다.
👉 useCallback
useMemo
와 비슷한 Hook
으로, useCallback 은 useMemo 를 기반으로 만들어졌지만 함수를 위해서 사용 할 때 더욱 편하게 해줌.
useMemo
는 특정 결과값을 재사용 할 때 사용하는 반면,
useCallback
은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다.
- 주의 !!
: 함수 안에서 사용하는 상태이거나, props가 있다면 꼭, deps 배열안에 포함시켜야 된다
: 만약, deps 배열 안에 함수에서 사용하는 값을 넣지 않으면, 함수 내에서 해당 값들을 참조할때 가장 최신 값을 참조 할 것이라고 보장 할 수 없다.
참고