# useCallback()

## 1. useCallback()이란?  <a href="#what-is-usecallback" id="what-is-usecallback"></a>

* 함수를 정의한 컴포넌트 내부에서 사용할 때는 적절하지 않다. 하지만 함수를 자식 컴포넌트에 전달 할 때는 useCallback을 사용하는 것이 좋다.&#x20;
* 자식 컴포넌트에 함수를 전달(전파)하게 되면 부모, 자식 모두가 함수를 계속해서 새롭게 렌더링 된다. 이는 성능최적화에 문제를 준다. → 동시성&#x20;
* useCallback() 훅을 사용하면 해당 함수를 기억(memo)하고 있기 때문에 의존성 모듈이 변경 되기 전에는 다시 렌더링 되지 않는다.&#x20;
* 컴포넌트가 업데이트 될 때 마다 불필요한 과정이 발생하지 않도록 설정한다.&#x20;

{% hint style="info" %}
왜 성능에 문제가 될까?&#x20;

```javascript
[] === [] // false
```

위의 두 배열은 빈 배열으로 같아 보이지만 다른 배열이다. 부모 컴포넌트에 정의된 함수가 자식 컴포넌트에 그대로 전파 되었을 때, 같은 함수처럼 보이지만 컴퓨터는 다른 함수라고 생각하고 렌더링한다. 이때 [재조정(reconciliation)](https://ko.reactjs.org/docs/reconciliation.html#gatsby-focus-wrapper) 문제가 발생한다. &#x20;
{% endhint %}

{% hint style="warning" %}
**주의!**&#x20;

* `useCallback()`은 종속성 배열을 필수로 갖는다.&#x20;
* 종속성 배열엔 `useCallback()`이 의존하고 있는 모든 것을 넣는다.&#x20;
  * `[]`(빈배열)로 설정하면 1번만 그려진다.&#x20;
  * `[state, props]`로 설정하면 state와 props가 변경될 때 다시 렌더링 된다.&#x20;
    {% endhint %}

## 2. useCallback() 작동 흐름  <a href="#flow" id="flow"></a>

![](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MUwklFlWyF8d_RTqGa8%2F-MUwlZAGnqvdYBhhAh4I%2Fimage.png?alt=media\&token=48b94a88-d41e-4faa-b84b-6a4d5bde0bdf)

## 3. 비교&#x20;

**일반 콜백 함수**

```
const handler = (e) => {
  // 핸들러 로직
}

```

**메모된 콜백 함수**

```
const handler = React.useCallback(
  (e) => {
    // 핸들러 로직
  }, 
  // 의존성 배열이 추가된 경우, 의존하는 상태 또는 데이터가 변경되었을 때만 업데이트
  []
)
```

{% hint style="warning" %}
메모된 콜백 함수는 GUI 렌더링, 스프라이트, 애니메이션 물리 등에 사용 되는 재귀 함수를 처리 할 때 사용하는 것이 좋다.&#x20;
{% endhint %}