Next js (넥스트 js)- Hook 4편 - useCallback

1편 useRef

2편 use Effect

3편 useDropZone

 

---

 

4편 useCallback에 대해서 포스팅 시작합니다.

 

 

 

​

useCallback 이란 ?

​

• 성능 최적화가 목표.
• 주로 함수가 불필요하게 다시 생성되는 것을 방지.
• 함수를 기억해서, 컴포넌트가 리렌더링 될 때, 함수 재생성을 막음 , useEffect와 마찬가지로, 의존성 배열에 의해, 필요시에만 재 생성.

​

​

useCallback 형태

 

const memoizedCallback = useCallback(() => {
  // 실행될 함수 내용
}, [dependencies]);

 

 

useCallback 사용 시기

• 자식 컴포넌트가 자주 리 렌더링 될 떄
  • 특히 자식 컴포넌트에 props로 넘길 때, 자식 컴포넌트가 변할 떄 마다 리렌더링이 발생하는데, 불필요한 리렌더링을 막을 수 있음
• 큰 리소스, 연산규모가 큰 함수 일 떄
• 부모 컴포넌트에서 자주 리렌더링이 발생할 때
  • 부모 컴포넌트에서 자식컴포넌트로 함수를 전달한다면, 부모 컴포넌트가 리렌더링 될 떄 마다, 자식컴포넌트도 리렌더링이 되는데, 그를 막기 위함.

​

​

useCallback 예시

​

1) 사용하지 않을 때,

 

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return <ChildComponent increment={increment} />;
};

 

- increment 함수를 자식 컴포넌트에게 전달하기 때문에, ChildComponent(자식 컴포넌트) 도 계속 리렌더링 됨

​

​

​

2) 사용할 때

 

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count가 변경될 때만 함수가 다시 생성

  return <ChildComponent increment={increment} />;
};

 

• count 값이 변할 때만 다시 생성되게 함으로써, 불필요한 함수 생성과 자식 컴포넌트 리렌더링 막아줌.

​

​

이렇게

useCallback에 대해 알아보았다.

​

다른 hook에 비해 간단하고 쉽다.

하지만 사용 할 장소를 잘 골라야 한다.

​

​

​

​

도움이 되셨다면

댓글과 좋아요 부탁드립니다.