useEffect VS useCallback VS useMemo

[ijieun0123]

🔗   참고 링크

useEffect, useMemo 그리고 useCallback 각 사용법과 차이
useCallback 사용법

📝   메모

[결론] 렌더링 횟수를 줄여 성능을 최적화하고 싶을 때 useCallback 을 사용할 수 있다.

• useCallback + useEffect
  => useEffect 의존성이 함수일 경우 useCallback 으로 감싸 참조를 동일하게 함.

• useCallback + React.memo
  => 자식 컴포넌트를 React.memo 로 감싸면 props 의존성이 변할 때만 렌더링 된다.
  => 이때, 함수는 참조값이 달라 항상 의존성이 변하므로, 이를 막기위해 함수를 props 로 전달하는 경우 useCallback 으로 감싼다.

나는 useCallback + React.memo 를 사용해 하위 컴포넌트의 렌더링 횟수를 줄여 성능 최적화를 시도함.

🔵   useCallback + React.memo 사용예시

1. paging.js

paging 은 어디서나 사용할 수 있게끔 만든 하위 컴포넌트이다.
이 컴포넌트를 React.memo 로 감싸 의존성이 변할 때만 렌더링 되도록 할 것이다.
props => page, count, onChangePage

import Pagination from '@mui/material/Pagination'
import Stack from '@mui/material/Stack'
import React, {memo} from 'react'  // import memo

const Paging = ({page, count, onChangePage}) => {
  return (
    <Stack m={10} spacing={2} justifyContent="center" alignItems="center">
      <Pagination
        count={count > 10 ? 10 : count}
        color="primary"
        page={page}
        onChange={onChangePage}
      />
    </Stack>
  )
}

export default memo(Paging)  // 자식 컴포넌트 React.memo 로 감싸기

2. usePage.js

usePage 는 paging 을 위해 만든 커스텀 훅이다.
( 의존성 props ) onChangePage 함수를 useCallback 으로 감싸 참조를 동일하게 해준다.

const usePage = value => {
  const [page, setPage] = useState(1)
  const onChangePage = useCallback((e, newPage) => setPage(newPage), [page])  // useCallback 으로 감싸 참조를 동일하도록

  useEffect(() => {
    setPage(1)
  }, [value ? value : null])

  return {page, onChangePage}
}

✅   체크리스트

• 렌더링 횟수를 정말로 줄여주었는지 확인이 필요함 ( redux dev tool )
• 부모 컴포넌트에서 동일한 자식 컴포넌트를 여러개 불렀을 때만 제대로 작동하는건지 확인이 필요함.