useMemo 및 useCallback을 사용해야 하는 경우: React 팬을 위한 간략한 가이드

React 개발자라면 이미 온라인에서 React useMemo 대 useCallback 토론을 접했고 그 어느 때보다 혼란스러워 했을 것입니다. useMemo와 useCallback의 차이점을 파악하는 것은 매우 어려울 수 있습니다. 괜찮아! 처음에는 React-Hooks를 이해하는 것이 어려울 수 있지만 나중에는 매우 유용할 수 있습니다.

이 글에서는 useCallback과 useMemo의 차이점과 useCallback과 useMemo를 언제 사용해야 하는지 알려드리겠습니다.

useMemo와 useCallback의 차이점

두 개의 내장 후크가 React 16.8에 도입되었습니다. 이러한 기능은 성능을 최적화하기 위해 도입되었습니다. useMemo와 useCallback의 차이는 무시해도 될 것 같으므로 혼동을 없애도록 노력하겠습니다.

React-Hooks란 무엇입니까?

Hooks는 클래스를 작성하지 않고도 useState 및 기타 React 기능을 허용하는 React에 도입된 새로운 기능입니다. 후크는 React의 상태 및 수명 주기 기능에 "연결"하는 메서드 및 기능입니다.

useCallback 대 useMemo

useCallback 후크는 자식 구성 요소가 실제로 필요하지 않고 반복해서 다시 렌더링될 때마다 사용됩니다. useCallback을 사용하면 매번 새 인스턴스를 만드는 대신 전달되는 해당 함수의 동일한 인스턴스를 반환하여 불필요한 재렌더링을 방지할 수 있습니다. 이는 상당한 시간(개발 시간과 비용)을 절약할 수 있습니다. 메모화된 콜백으로 종속성 배열을 전달하면 종속성이 변경될 때만 변경되는 메모화된 버전이 생성됩니다.

useMemo는 React의 기능적 컴포넌트에서 사용됩니다. 메모된 값을 반환하는 데 사용됩니다. 메모이제이션은 다음 실행을 위해 동일한 인수로 함수를 다시 컴파일하지 않고 캐시된 결과를 반환하여 재컴파일 시간을 절약하는 과정을 말합니다. 캐시된 결과는 다음에 호출될 때 반환됩니다. useMemo 후크는 메모리 매핑된 값을 제공합니다.

분명히 몇 가지 유사점이 있습니다. useMemo와 useCallback 모두에서 후크는 함수와 종속성 배열을 허용합니다. 그러나 useCallback은 반환된 값을 기억하고 useMemo는 함수를 기억합니다. 즉, 하나는 값 유형을 캐시하고 다른 하나는 함수를 캐시합니다.

• 더 읽어보기 – 파일을 정리해야 하는 방법과 이유
• 교실에서 전자 기기를 사용하는 9가지 방법

useCallback 대 useMemo를 사용하는 경우

그렇다면 useCallback은 언제 사용해야 하며, useMemo는 언제 가장 좋은 선택일까요? 예를 들어 보겠습니다. 계산량이 많고 비용이 많이 드는 코드가 인수를 수락하고 값을 반환하는 경우 useMemo가 가장 좋은 옵션입니다. 그렇게 하면 코드를 다시 실행하고 시간과 계산 능력을 낭비하지 않고 렌더 간에 값을 계속 참조할 수 있습니다.

여러 렌더에서 함수 인스턴스를 지속적으로 유지해야 하는 경우 useCallback을 대신 사용해야 합니다. 본질적으로 함수를 그대로 유지하기 위해 React 구성 요소의 범위 외부에 함수를 배치하기 때문입니다.

useEffect 란 무엇입니까?

useEffect를 사용할 때 겪을 수 있는 종속성 배열에 대해 이미 언급했습니다. useEffect는 또 다른 React 후크입니다. 콜백 인수 논리를 사용하여 기능 구성 요소의 부작용을 처리하는 데 사용됩니다. 종속성은 부수적 효과의 종속성 목록(예: 소품 또는 상태 값)입니다.

이 후크는 컴포넌트가 렌더링 후 작업을 수행해야 함을 React에 보여줍니다. DOM이 업데이트되면 전달한 효과가 저장됩니다. 이 결과를 얻기 위해 데이터 가져오기를 수행할 수도 있습니다.

간단히 말해서 useCallback, useMemo 및 useEffect는 모두 React 애플리케이션에서 구성 요소를 다시 렌더링하는 사이의 성능 향상과 관련이 있습니다.

하지만 후크를 남용하지 않는 것이 중요합니다. 후크는 새롭고 복잡한 논리를 도입하며 잠재적으로 의도한 것과 반대되는 효과를 가져서 문제를 해결하는 대신 성능 문제를 일으킬 수 있습니다. useMemo는 비용이 많이 드는 계산에만 사용해야 합니다.

애플리케이션의 근본적인 문제를 해결하기 위해 useMemo 또는 useCallback을 사용하지 마십시오. 결국 이러한 문제가 다시 나타나 당신을 괴롭힐 것이므로 알려진 결함에 먼저 주의를 기울이는 것이 가장 좋습니다.

• 더 읽어보기 – 최고의 CMS를 선택하는 방법
• 암호화 방법의 장단점은 무엇입니까?

결론

바라건대, 이 기사는 통찰력이 있었고 두 가지 후크를 더 잘 이해했습니다. 요약해서 말하자면:

• 둘 다 함수와 종속성 배열을 허용합니다.
• useMemo는 반환된 값을 기억하고 useCallback은 함수를 기억합니다.

useMemo와 useCallback의 차이점은 꽤 명확합니다! 이러한 도구는 시간과 비용을 절약할 수 있는 잠재력이 있지만 적절한 상황과 환경에서 사용되는 경우에만 가능합니다.

이 튜토리얼이 useMemo와 useCallback을 사용하는 시기: React 팬을 위한 간략한 가이드 에 대해 아는 데 도움이 되었기를 바랍니다. 하고 싶은 말이 있으면 댓글 섹션을 통해 알려주십시오. 이 기사가 마음에 들면 공유하고 Facebook, Twitter 및 YouTube에서 WhatVwant를 팔로우하여 더 많은 기술 팁을 확인하세요.

useMemo 및 useCallback 사용 시기 – 자주 묻는 질문