1. useCallback
useCallback의 경우 특정 함수를 재사용하기 위해서 사용된다. useMemo와 유사하게(사실 useCallback자체가 useMemo기반의 로직) 각 함수마다 useCallback으로 정의하고 조건을 달아주면 된다. 당연하게도 해당 조건들은 함수내에서 사용하는 모든 변수여야 함 (아직 안배워서 모르겠다 빨리 Hook 들어야지)
자식컴포넌트에 함수를 props으로 줄때는 반드시 useCallback을 사용하여 리렌더링이 안되도록 하자.
2. useMemo
useMemo의 경우 "생성"함수에 관련된 기능. 생성자 함수가 고비용(처리 시간이 오래 걸리는 등)인 경우 렌더링마다 계산하는 것은 처리 시간이 오래 걸리므로 값을 기억해놓고 의존성이 변경되었을 경우에만 다시 계산해주는 기능이다.
3. useEffect
useEffect의 경우는 api 호출, 타이머 등 렌더링 과정에서 한 번만 호출해도 될 기능들이 렌더링되어 실행되거나, 호출과정에서 렌더링에 영향을 끼칠 수 있는 것을 모아서 따로 처리하기 위한 기능이다.
4. React.memo
React.memo는 props 변화에만 영향을 준다.
즉, 함수 컴포넌트 안에서 구현한 state나 context가 변할 때는 재렌더링된다.
props가 갖는 복잡한 객체에 대하여 얕은 비교만을 수행하는 것이 기본 동작이다.
다른 비교 동작을 원한다면, 두번째 인자로 별도의 비교 함수를 제공하면 된다. (useMemo)
5. 비교
useEffect vs useMemo
useEffect는 해당 컴포넌트의 렌더링이 완료된 후에 실행되지만, useMemo는 렌더링 중에 실행됨
React.memo vs useMemo
React.memo는 한 컴포넌트를 같은 프로퍼티로 리랜더링하는 경우가 빈번할 때 사용해야 한다. 무조건 사용한다고 좋은 것이 아니다.
컴포넌트에 적용할 수 있는 React.memo와 달리, 복잡한 계산의 결과 값을 Memoization해 최적화하기 위한 useMemo Hook이 있다. Hook이니까 함수형 컴포넌트 내에서만 사용할 수 있다.
React.memo와 useMemo의 차이는 어디에 활용되는가 인 것 같다.
React.memo의 경우에는 컴포넌트를 받아 컴포넌트를 반환한다.
useMemo의 경우에는 값을 계산하는 과정을 최적화해 값을 반환받는다.
