학습내용

• memo()
• useCallback
• useMemo
• Custom Hook

memo()

컴포넌트의 불필요한 리렌더링을 방지하는 함수(리액트 훅X) useCallback()과 useMemo()를 이해하기 위해서 선행되어야 하는 개념이다.

불필요한 리렌더링이란?
화면에서 변경되는 부분이 없음에도 아래에 해당돼서 일어나는 렌더링

1. 부모 컴포넌트가 렌더링 되는 경우
2. 컴포넌트의 state가 변경되는 경우
3. 부모로부터 전달받은 props의 값이 변경되는 경우

import { memo } from "react";

const ComponentName = () => {
	return <button>버튼</button>;
};

export default memo(ComponentName);

memo를 import, export 하는 방식으로 사용한다.

useCallback

생성된 함수를 새로 만들지 않고 재사용하는 훅
const fucntionName = useCallback(() => {함수, [의존성 배열]}

import React, { memo } from "react";

const Button = ({ onClick }) => {
  return <button onClick={onClick}>버튼</button>;
};

export default memo(Button);

위와 같이 memo()를 사용해도 부모 컴포넌트로부터 props를 받게되면 3번에 해당하기 때문에 또 다시 불필요한 리렌더링이 발생한다.

이와 같은 경우, 부모 컴포넌트에서 useCallback을 사용하면 함수가 최초로 생성된 후로는 재생성 되지 않는다. 단, 함수를 재생성 해야 하는 경우를 대비해 두 번째 인자로 의존성배열을 사용한다. 의존성배열의 값이 변경되면 함수가 재생성된다.

useMemo

useCallback과 같은 기능이지만 함수가 아닌 배열과 객체를 대상으로 한다. 원시타입 데이터는 리렌더링이 일어나지 않으므로 useMemo를 사용하지 않는다.

⚠️ memo(), useCallback, useMemo의 무분별한 사용은 오히려 성능을 악화시키므로 사용하기에 앞서서 불필요한 리렌더링이 맞는지 확인하는 작업이 필요하다.

Custom Hook

리액트 훅을 사용해서 반복되는 로직이나 기능을 별도로 분리한 훅. 보통 src/hooks구조로 설계하며 파일명에는 useHookname.js와 같이 use가 포함되어야만 한다.