React 렌더링 시점

1. Props가 변경되었을 때
2. State가 변경되었을 때
3. forceUpdate()를 실행하였을 때
4. 부모 컴포넌트가 렌더링 되었을 때

⇒ 위 과정에서 보여지는 부분에 영향을 미치지 않는 변경사항 때문에 컴포넌트 렌더링 결과에 전혀 영향을 미치지 않는 리렌더링이 발생하게 된다면, 불필요한 렌더링으로 인해 성능 손실이 발생할 수 있음

1. useEffect : Side Effect 처리

useEffect는 모든 컴포넌트가 렌더링된 후 상태 변화, 구독, 타이머, 로깅 및 기타 side effect를 처리하는데 도움이 되는 Hook

2. useCallback : 함수가 재생성 되는 것을 방지

useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용,

함수와 종속성 배열(dependency array)을 매개변수로 전달받으면 메모이제이션된 콜백을 반환하므로 부모 컴포넌트가 자식 컴포넌트의 렌더링을 방지하기 위해 자식 컴포넌트에 콜백을 전달할 때 매우 유용

⇒ 컴포넌트가 리렌더 될 때 마다 컴포넌트 내의 정의된 함수들은 이전에 생성된 함수와는 다른 주소 값을 가진 함수를 매번 생성하는데 useCallback을 이용한다면 종속성 배열이 변경되지 않았다면 동일한 주소값을 가진 함수를 재사용할 수 있음

const memorizedCallback = useCallback(
  () => {
     console.log(a,b);
  },
  [a,b] 
);