컴포넌트의 쓸모없는 재 렌더링 을 방지 하기 위해 useCallback () 을 사용하여 콜백 함수를 메모 해야한다는 말을 자주 들었을 것 입니다.

그러나 정확히 useCallback () 🤔 은 무엇 입니까 ? 생각해 본 적이 있습니까?

그것이 무엇인지 그리고 그것을 올바르게 사용하는 곳을 이해하는 데 도움을 드리겠습니다.

먼저 함수 동등성 검사를 이해합시다

우리가 그것을 어떻게 사용하는지보기 전에 그것이 무엇을 해결하는지 봅시다. 함수를 반환하는 간단한 함수를 작성해 보겠습니다.

mul1 과 mul2 는 두 숫자를 곱하는 함수입니다. 그들은 곱하기 기능에 의해 생성되었습니다 .

JavaScript의 함수는 일반 객체입니다. mul1 및 mul2 함수 는 동일한 코드를 공유하지만 서로 다른 함수 객체입니다. 그것들을 비교하면 false로 평가됩니다 .

이것이 바로 JavaScript 객체가 작동하는 방식입니다. 객체 (함수 객체 포함)는 자신과 동일합니다.

이제 useCallback ()의 ​​목적

React.useCallback ()은 기본적으로 위에서 본 함수 동등성 검사를 해결합니다. 동일한 코드를 공유하는 다른 함수 객체는 종종 React 구성 요소 내에 생성됩니다.

handleClick (인라인 함수)은 CustomComponent의 모든 렌더링에서 다른 함수 객체입니다 .

그리고 React Components와 함께 인라인으로 선언 된 함수가 있어도 아무런 해가 없습니다. 성능에 해로운 영향을 미치지 않습니다.

그러나 어떤 경우에는 렌더링 사이에 단일 함수 인스턴스를 유지해야합니다.

1. 함수에 내부 상태가있는 경우 (예 : 함수가 디 바운스 / 스로틀 링되는 경우)

2. 내부에 래핑 된 기능적 구성 요소 React.memo()는 함수 객체 소품을받습니다.

콜백을 수락하는 자식 구성 요소가 참조 동등성 검사 (예 : React.memo () 또는 shouldComponentUpdate () )에 의존하여 해당 props가 변경 될 때 불필요한 다시 렌더링을 방지하는 경우 콜백 props가 다음과 같이 변경되지 않는 것이 중요합니다. 렌더링합니다.

따라서 부모 구성 요소에서 콜백 prop을 useCallback ()으로 래핑 하고 동일한 함수 객체를 최적화 된 자식 구성 요소로 전달하도록 보장 할 수 있습니다.

3. 함수 객체가 다른 후크에 대한 종속성 인 경우 useEffect(..., [callback])

위의 예에서 myFunction 이 MyComponent 가 다시 빌드되도록 하는 작업을 수행하면 (예 : props 또는 상태를 변경하는 작업을 수행하는 경우) 무한 루프 상태로 전환됩니다.

이를 방지하기 위해 함수 주위에 useCallback () 을 래핑 하고 종속성이 변경된 경우에만 함수가 다시 생성되도록 해당 종속성을 정의합니다. 따라서 함수는 더 이상 모든 렌더링주기에서 다시 선언되지 않습니다.

따라서 위의 사용 사례는 useCallback 후크가 도움이되는 경우입니다. 동일한 종속성 값이 주어지면 후크는 렌더링간에 동일한 함수 인스턴스를 반환하고 성능을 향상시킵니다.

실제로 useCallback () 이라는 것을 이해하는 데 도움이 되었기를 바랍니다! 😊

이 기사를 읽어 주셔서 감사합니다. 마음에 드 셨다면 👏 버튼을 클릭하여 다른 사람들이 쉽게 찾을 수 있도록 도와주세요.