[react] memo, useMemo, useCallback

React Hooks, 최적화에 관련된 Hook알아보기 📕

useMemo, useCallback은 모두 불필요한 렌더링, 함수의 재생성을 막는 Hook이며 memo는 같은 기능을 하는 함수입니다.

memo

---

memo는 컴포넌트의 불필요한 리렌더링을 최소화하는 함수입니다. 화면에서 변경되는 부분이 없음에도 아래의 사유로 화면이 리렌더링 되지 않도록 합니다.

• 부모 컴포넌트가 렌더링 된 경우
• 컴포넌트의 state가 변경된 경우
• 부모로부터 전달받은 props 값이 변경된 경우 단, 전달받은 props 값이 변경되지 않더라도, 부모 컴포넌트가 재생성될 때 함께 재생성되는 종류의 props라면 값이 변경된것으로 판단하여 re-rendering을 막기 어려울 수 있다. 이 때는 아래의 useCallback, useMemo와 함께 사용한다.

import { memo } from 'react'		// → import

function COMPONENT_NAME () {}

export default memo(COMPONENT_NAME)	// → 컴포넌트 이름을 감싸 사용합니다.

useCallback

---

useCallback은 컴포넌트가 re-rendering될 때, 생성된 함수를 새로 생성하지않고 재사용할 때 사용하는 훅이다.

import { useCallback } from 'react'

const FUNCTION_NAME = useCallback(() => {	// → 함수 선언
    // 실행할 내용
}, [])

매개변수로 실행할 함수와 의존성 배열을 받는다. 의존성 배열이 변경될 때만 함수를 재생성한다.

useEffect와 마찬가지로 [] 빈 배열을 넣어주면 생성이후 재생성되지않는다.

useMemo

---

useMemo는 useCallback과 사용 방식이 동일하다. 단 대상이 함수가 아닌 배열이나 객체와 같은 값일때 사용한다.

import { useMemo } from 'react'
const OBJ_NAME = usememo(() => {
    return {
        KEY: VALUE,
        KEY: VALUE
    }, [] })

매개변수로 배열 또는 객체를 반환하는 함수와 의존성 배열을 받는다. 의존성 배열이 변경될 때만 일반 상황과 같이 리렌더링을 한다.

주의사항

---

• memo(), useCallback, useMemo 함수는 ““렌더링 전/후 값을 비교하여 같으면 재생성을 하지않는다.”라는 과정을 추가하는 코드이므로 무분별히 사용할 경우 오히려 퍼포먼스 성능에 악영향을 끼칠 수 있다.
• 원시타입 데이터는 변경되어도 리렌더링하지 않는다.