React useCallBack() 소개

React를 사용하여 웹사이트를 구축할 때 웹사이트가 얼마나 빨리 로드되고 사용자가 얼마나 빨리 웹사이트와 상호작용할 수 있는지 고려하는 것이 중요합니다. React 웹사이트를 더 빠르게 만드는 한 가지 방법은 페이지에서 변경되지 않은 부분을 다시 렌더링하는 것과 같은 불필요한 작업을 수행하지 않도록 하는 것입니다.

React의 useCallback() 함수는 우리가 정의한 함수를 기억하고 필요할 때만 다시 생성함으로써 이를 달성하는 데 도움이 됩니다.이를 통해 사용자는 웹 사이트를 더 빠르고 빠르게 반응할 수 있습니다. 같은 해 Stack Overflow 설문 조사 에 따르면 React는 가장 인기 있는 프런트 엔드 JavaScript 라이브러리로 useCallback()이 업계에서 널리 사용될 가능성이 있음을 시사합니다.

이 기사에서는 React에서 useCallBack()이 무엇 이며 성능을 향상시키기 위해 React 코드에서 사용하는 방법에 대해 설명합니다 .

React에서 useCallBack은 무엇입니까?

useCallback()은 함수를 메모하기 위해 사용되는 React에서 제공하는 후크 함수입니다. 즉, 원치 않는 재렌더링을 방지하여 구성 요소의 성능을 최적화하는 데 도움이 됩니다.

React에서 구성 요소의 상태 또는 소품이 변경되면 업데이트된 값을 반영하기 위해 구성 요소가 다시 렌더링됩니다. 이 프로세스는 계산 비용이 많이 들고 부적절하게 처리할 경우 애플리케이션의 성능을 저하시킬 수 있습니다. useCallback()이 유용한 곳입니다.

useCallback()을 사용하면 사용자는 함수를 기억할 수 있습니다. 즉, 의존성이 변경될 때만 재정의됩니다. 이렇게 하면 불필요한 구성 요소가 다시 렌더링되지 않으므로 애플리케이션의 성능이 최적화됩니다.

예를 들면 다음과 같습니다.

const memoizedCallback = useCallback(

() => {

doSomething(a, b);

},

[a, b],

);

자습서를 통해 React를 시작하는 것은 좋은 방법이지만 개발을 시작하기 위한 동적 과정을 추구하면 기술을 업데이트하는 데 크게 도움이 될 수 있습니다. upGrad에서 kickstart까지의 소프트웨어 개발 전문 대학원 프로그램 – 풀 스택 개발 과정을 확인하십시오 !

useCallBack() 사용의 이점

다음은 React useCallBack() 사용의 몇 가지 장점입니다.

• useCallback()은 구성 요소의 불필요한 업데이트를 방지하여 React 애플리케이션이 더 빠르게 실행되도록 도울 수 있습니다.
• 구성 요소가 많은 데이터를 가져와 그래프로 표시하면 useCallback()의 이점을 얻을 수 있습니다.
• 그래프의 상위 구성 요소가 업데이트되지만 변경 사항이 그래프에 영향을 미치지 않는 경우 이를 업데이트하고 데이터를 다시 가져올 필요가 없습니다.
• 데이터를 가져오는 함수를 기억하기 위해 useCallback()을 사용하면 불필요한 업데이트를 피하고 애플리케이션을 더 빠르고 매끄럽게 만들 수 있습니다.
• 이 최적화는 애플리케이션이 더 빠르고 효율적으로 작동하므로 사용자 경험을 개선할 수 있습니다.

upGrad의소프트웨어 개발 과정을확인하여 기술을 향상시키십시오.

useCallBack() 구문 및 매개변수

const memoizedCallback = useCallback(

() => {

doSomething();

},

[의존성1, 의존성2]

);

예제에서 useCallback() 후크는 이전에 생성된 버전을 캐시한다는 의미인 doSomething()함수를 기억합니다. 캐싱된 함수는종속성1 또는 종속성2의 값이 변경되지 않는 한 후속 렌더링에서만 사용됩니다.

이러한 종속성 중 하나가 변경되면doSomething() 함수 의 새 버전이 생성되고 캐시된 버전이 새 버전으로 대체됩니다.이는 불필요한 함수 생성 및 다시 렌더링을 방지하여 애플리케이션의 성능을 최적화하는 데 도움이 됩니다.

useMemo()와 useCallBack()의 차이점

useCallback 및 useMemo는 값을 메모하여 React 애플리케이션의 성능을 향상시킬 수 있는 React Hooks입니다. 두 후크 모두 함수를 인수로 사용하고 해당 함수의 메모된 버전을 반환합니다.

둘의 차이점은 다음과 같습니다.

useCallBack()을 사용하는 시나리오

다음은 useCallBack()을 사용할 수 있는 시나리오입니다.

하위 구성요소 최적화

useCallback React는 특히 이러한 자식 구성 요소에 콜백을 전달할 때 불필요한 렌더링을 피하기 위해 참조 동등성에 의존하는 자식 구성 요소를 최적화합니다.

불필요한 렌더링 방지

React useCallback은 필요 없이 반복적으로 렌더링되는 자식 요소가 있는 구성 요소가 있을 때 특히 유용합니다. 콜백 함수와 종속성 배열을 useCallback 에 전달하여 불필요한 렌더링을 방지할 수 있습니다.

upGrad의 풀 스택 소프트웨어 개발 부트캠프 과정 의 도움으로 useCallBack() 함수를 자세히 이해할 수 있는 기회를 활용하십시오 .

인기 있는 소프트웨어 엔지니어링 과정 살펴보기

useCallBack()의 예

다음은 useCallBack() 후크를 구현하는 방법에 대한 몇 가지 예입니다.

useCallBack 예제 1

부모 구성 요소가 자식 구성 요소에 대한 소품으로 함수를 전달할 때 부모를 자주 다시 렌더링하면 자식 구성 요소가 불필요하게 다시 렌더링될 수 있습니다. 이러한 경우 useCallback을 사용하여 이러한 불필요한 재렌더링을 방지하는 데 도움이 되는 함수를 메모합니다.

import React, { useCallback } from 'react';

함수 ParentComponent() {

const handleButtonClick = useCallback(() => {

console.log('버튼 클릭');

}, []);

반품 (

<ChildComponent onClick={handleButtonClick} />

);

}

함수 ChildComponent({ onClick }) {

반품 (

<button onClick={onClick}>클릭</button>

);

}

useCallBack 예제 2

대규모 데이터 세트에서 복잡한 계산을 수행하는 함수가 있다고 가정합니다. 이 함수가 자주 호출되고 실행하는 데 시간이 오래 걸리면 애플리케이션에서 성능 문제가 발생할 수 있습니다. 이 시나리오에서는 useCallback을 사용하여 함수를 메모하고 불필요한 계산 재실행을 방지할 수 있습니다.

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

함수 ParentComponent() {

const [데이터, setData] = useState([]);

const processData = useCallback(() => {

const processorData = "처리된 데이터";

처리된 데이터를 반환합니다.

}, [데이터]);

반품 (

<ChildComponent processData={processData} />

);

}

함수 ChildComponent({ processData }) {

const 결과 = processData();

반품 (

<div>{결과}</div>

);

}

useCallBack()을 사용하여 반응 성능 최적화

useCallback 후크는 React의 강력한 도구로, 함수를 메모하여 종속성 중 하나가 변경될 때만 다시 만들어지도록 합니다. 이는 자주 호출되는 성능 집약적인 함수에 특히 유용합니다. 사용 방법을 보려면 아래 예를 확인하십시오.

import { useState, useEffect } from 'react';

함수 앱() {

const [단어, setWord] = useState("밥");

const say = () => console.log(`당신의 단어는: ${word}`);

useEffect(() => {

말하다();

}, [말하다]);

return <div>환영합니다!</div>;

}

이 예제는 useEffect 후크가 say 함수에 종속되어 있음을 보여줍니다. 즉, 함수가 변경될 때만 트리거되어야 합니다. 그러나 React의 참조 동등성 검사로 인해 함수는 실제로 변경되지 않은 경우에도 항상 true로 평가되어 불필요한 렌더링이 발생합니다.

useEffect 콜백은 각 렌더링에서 사용되며 이는 성능에 적합하지 않습니다. 이를 해결하는 한 가지 방법은 함수를 useEffect 블록으로 재배치하는 것이지만 다른 곳에서는 함수를 사용할 수 없기 때문에 이상적인 솔루션은 아닙니다. 아래에서 이 예를 확인하십시오 –

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

함수 앱() {

const [단어, setWord] = useState("밥");

const say = () => console.log(`당신의 단어는: ${word}`);

useEffect(() => {

말하다();

}, [말하다]);

return <div>환영합니다!</div>;

}

또 다른 해결책은 함수를 래핑하여 useCallback 후크를 구현하는 것입니다 . useCallback 함수에는 useEffect와 같은 종속성 배열이 필요하다는 점을 기억하는 것이 중요합니다. 함수가 변수를 사용하는 경우 사용자는 배열과 함께 변수를 전달할 수 있습니다. 그렇지 않으면 비워 두십시오. 여기서 say 함수는 word 변수에 의존하므로 배열에 포함시킵니다.

'react'에서 {useState, useEffect, useCallback} 가져오기

함수 앱(){

const [단어,setWord]=useState("밥")

const say = useCallback(()=>console.log(`당신의 단어는: ${word}`),[단어])

useEffect(()=>{

말하다()

},[말하다])

return <div>환영합니다!</div>

}

useCallBack()을 사용하지 않는 경우

useCallback()은 특정 시나리오에서 성능을 최적화하는 데 유용한 도구이지만 불필요하거나 해로운 경우도 있습니다. 다음은 useCallback()을 사용하지 않는 경우의 몇 가지 예입니다.

• 함수가 prop으로 전달되면 이미 외부 상태에 의존하지 않는 순수 함수입니다.
• 함수가 소품으로 전달되면 성능 문제가 발생하지 않으며 과도하게 호출되지 않습니다.
• 함수가 소품으로 전달되면 여러 위치에서 사용되며 다른 동작이나 종속성을 반영하기 위해 매번 다시 생성해야 합니다.
• 함수가 작은 구성 요소 트리의 일부인 소품으로 전달되면 useCallback()의 성능 향상은 무시할 수 있습니다.
• 함수가 소품으로 전달되면 이벤트 핸들러로 사용되며 한 번만 호출됩니다.

이러한 경우 useCallback()을 사용하면 메모화된 콜백을 만들고 유지하는 오버헤드로 인해 실제로 성능이 저하될 수 있습니다. useCallback()을 사용할지 여부를 결정하기 전에 각 사용 사례를 신중하게 고려하고 잠재적 비용 대비 잠재적 이점을 비교하는 것이 중요합니다.

주문형 소프트웨어 개발 기술

결론

useCallback을 사용하는 것은 React 애플리케이션의 성능을 최적화하기 위한 강력한 도구가 될 수 있습니다. 기능을 기억함으로써 불필요한 재렌더링을 피할 수 있어 보다 매끄럽고 효율적인 사용자 경험을 제공합니다. 그러나 useCallback을 신중하게 사용하고 가장 효과적인 시나리오를 이해하는 것이 중요합니다.

upGrad는 산업 관련 기술에 중점을 둔 포괄적인 컴퓨터 과학 교육을 제공하는 컴퓨터 과학 석사 프로그램을 제공합니다. 이 프로그램은 소프트웨어 개발 기술을 향상시키기 위해 신입 또는 경험이 많은 개인을 위한 것입니다. 이 과정을 통해 학생들은 실제 세계에서 자신의 경력을 업그레이드하고 열망하는 분야의 전문가가 될 준비가 될 것입니다.