useEffect, useCallback, useMemo 간 비교

배경

이 세가지 hook은 관련된? 변수의 변화에 따라 연동되어 실행됨. 그 차이를 살펴보자.

---

useEffect(  callback , [관련 변수]  )

최초 컴포넌트 마운트, 컴포넌트 내 레이아웃 배치와 랜더링 완료된 후에 실행. 

두번째 인자에 관련변수를 지정하면, 해당 변수값이 수정될 때만 실행. 

---

useCallback ( callback , [ 관련 변수] )

두번째 인자값이 변경되는 경우, 이전에 기억하는 함수 자체와 비교하여 수정이 된 경우에만 리랜더링

함수 자체를 기억. (함수 생성 자체가 오래걸리는 경우, 즉 함수 내의 연산이 복잡한 경우 등에 사용하면 도움됨)

함수 reference를 기억

---

useMemo( callback , [관련 변수] )

두번째 인자값이 변경되는 경우, 이전에 기억하는 함수 리턴값과 비교하여 수정이 된 경우에만 리랜더링

useMemo는 특정함수의 리턴값을 기억함.