React hook (보강 메모)

 

useEffect
useMemo	컴포넌트 또는 데이터의 생애 주기에 따라 값을 업데이트하고 싶을 때 사용

 

dependencies가 mount 될때

• useEffect : 함수를 실행한다.
  (mount, unmount 실행은 반드시 paint 1회 후에 이루어진다. --> 화면 깜빡 거림 등이 동반)
• useLayoutEffect : 함수를 실행한다.
• useMemo : 값을 할당한다.
• useCallback : 함수를 할당한다.

언제 useMemo와 useCallback을 사용하는가?

1. 컴포넌트, 데이터의 생애주기에 맞춰 값을 업데이트하고 싶을 때
2. 리렌더링 될 때마다 새롭게 값을 계산하거나 새로운 함수를 정의하는 것이 문제가 될 때
   1. 새로운 값의 게산이나 새로운 함수의 정의가 무거울 때
   2. 값, 함수의 참조값을 유지하는 것이 중요할 때

 

- useRef : 계속해서 같은 값을 담아준다.

 return 에 있는 dom은 계속 같은 dom이고 virtual dom은 

- render -> react update dom -> layoutEffect (mount/unmount) -> paint -> Effect