React 최적화 with Hooks, Custom Hooks

useEffect : side effect 처리할 때

useEffect는 모든 컴포넌트가 랜더링 후 상태변화, 구독, 타이머, 로깅 및 기타 side effect를 처리하는 데 도움이 됩니다. (라이프 사이클 매소드와 비슷하게 사용)

 

• useCallback : 함수가 재생성 되는 것 방지
  deps 배열이 변경되지 않았다면 동일 주소값을 가진 함수를 재사용 가능. 
• 메모이제이션된 콜백을 반환하므로 부모 컴포넌트가 자식 컴포넌트의 렌더링을 방지하기 위해 자식 컴포넌트에 콜백을 전달할 때 매우 유용합니다.

 

useMemo: 함수의 연산량이 많을 때 이전 결과값을 재사용

• deps 배열 변경시에만 다시 계산.
• 메모이제이션된 콜백이 아닌 전달받은 함수의 메모이제션된 값을 반환합니다.
• 비싼 계산을 해야하는 잘 바뀌지 않는 값의 리렌더링을 방지할 때 유용합니다.

 

React.memo: 같은 props로 랜더링이 자주 일어날 때 이전 값 재사용

HOC(High-Order-Components)로서 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 구조의 함수 

 

custom hooks

개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있습니다.

커스텀 훅을 정의할 때는 useFetch, useInputs과 같이 함수 이름 앞에 use를 붙이는 것이 규칙이며 보통 프로젝트 내의 hooks 디렉토리에 커스텀 훅을 위치시킵니다.