[React] 리렌더링 최적화 2편 : useCallback Hook

---

 

■ React 최적화 - 리렌더링 최적화를 위해서 ! 

■ useCallBack

■ 예시 코드

■ 1~2편 리렌더링 최적화 방법 복습 

---

■ React 최적화 - 리렌더링 최적화를 위해서 ! 

 

props가 원시값일 경우 컴포넌트 최적화 방법에 대해 알고 싶으시다면,

이전 포스팅을 참고해주시면 감사하겠습니다 !!

 

https://leebaek.tistory.com/151

[React] props로 함수를 넘겨주자 - 리렌더링 최적화 1편 : memo

---

■ useCallback

: 컴포넌트가 렌더링될 때마다 새로 생성되는 함수를 메모이제이션하여 참조값을 유지하는 Hook

 

- (이전 포스팅) 컴포넌트가 렌더링될 때 마다 함수가 새로 만들어짐 → 참조값이 달라짐 → memo 하나만으로는 효과 없음

- useCallback을 사용하면 의존성 배열이 바뀌지 않는 이상 이전 함수를 재사용함

→ 함수가 props로 전달될 때 불필요한 리렌더링 방지

 

첫번째 인자: 메모제이션 하고 싶은 코드

두번째 인자: 의존성 배열 ( *의존성 배열에 있는 값이 변경되면 새로운 함수 생성됨 )

const memoizedCallback = useCallback(
  () => {
    // 콜백 내용
  },
  [dependencies],
);

---

■ 예시 코드

import React, { useState, useCallback } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []); // 의존성 배열이 비어 있으니, 컴포넌트가 렌더링되어도 함수는 그대로!

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <Child onClick={increment} />
    </div>
  );
}

const Child = React.memo(function Child({ onClick }) {
  console.log('Child rendered');
  return <button onClick={onClick}>Click Child</button>;
});

---

■ 1~2편 리렌더링 최적화 방법 복습 !

1. React.memo로 컴포넌트 리렌더링 차단

- React.memo는 props가 바뀌지 않으면 리렌더링 방지

- 단, props로 전달되는 함수가 매번 새로 생성되면 의미 없음 !

const Child = React.memo(function Child({ text }) {
  console.log("자식 렌더링!");
  return <div>{text}</div>;
});

 

2. useCallback으로 함수 참조 고정

- 렌더될 때마다 새 함수가 생성되는 것을 방지

- React.memo와 함께 쓰는 것이 좋음 !

const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

 

- useCallback이 해당 함수를 메모이제이션해서 렌더링이 다시 되어도 참조가 동일하게 유지됨

→ 따라서, React.memo된 자식 컴포넌트는 불필요한 리렌더링 안함 ! 

import { useCallback } from "react";

function MyComponent() {
  const handleClick = useCallback(function handleClick() {
    console.log("clicked!");
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

---

 

다음 포스팅에서는 props가  복잡한 값, 배열, 객체일 경우 리렌더링 최적화 하는 방법에 대해 설명할게요 !! 안녕

---