본문 바로가기

useCallback2

React useCallback과 useMemo 차이 성능 최적화란?useCallback과 useMemo는 성능 최적화를 위해 고민하면서 접하게 되었다. 그렇다면 성능 최적화란 무엇일까?성능 최적화란 컴포넌트가 불필요하게 재렌더링되거나 시간이 많이 걸리는 연산이 반복되는 것을 방지하여 리소스를 효율적으로 관리하는 것을 말한다. 이를 위해 메모이제이션이라는 기법을 사용하게 되는데, 메모이제이션은 이전에 계산한 값을 기억해 두었다가 동일한 입력이 들어왔을 때 다시 계산하지 않고 저장된 값을 재사용하는 방법이다.  이제 메모이제이션을 사용하는 useCallback과 useMemo에 대해 알아보자useCallback란?useCallback은 함수를 메모이제이션하는 데 사용된다. useCallback을 통해 함수가 불필요하게 다시 생성되는 것을 방지하고, 특정 함수.. 2024. 10. 13.
[React] useCallback을 활용해서 파일 다운로드 버튼&기능 구현하기 프로젝트를 진행하면서 서버에 DummyData가 올라오기 전 useCallback 훅을 사용하여 버튼을 클릭했을 때 특정 파일이 기기에서 다운받아지도록 구현하였다. UseCallback이란? useCallback은 React에서 함수를 캐싱하고 재사용하기 위해 사용되는 훅이다. 이를 사용하여 함수가 불필요하게 재생성되는 것을 방지하고, 메모리 및 성능을 최적화할 수 있다. 나는 useCallback 함수 안에 document.createElement('a') 를 사용하여 다운로드를 위한 elements를 생성하였고, 생성한 elements에 대한 URL을 임시로 생성되게 하여 다운되도록 하였다. 1. UseCallback 콜백 함수 지정 const handleFileDownload = useCallbac.. 2023. 7. 9.