useCallback

[ Optimize ] useCallback

useMemo 에 이어서 useCallback 에 대해서 알아봅시다. 이번에도 Dingdong Ditch(띵똥 벨튀) component를 뜯어서 개조를 해볼것입니다. 전 포스팅에서도 말했지만 useMemo, useCallback 서로비슷합니다. useMemo 기반에서 추가된게 useCallback 이니까영 Memoization 이란? 주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장을 의미합니다. useMemo: memoization 된 값을 반환 합니다. useCallback: memoization 된 함수를 반환 합니다. useCallback의 간단한 예시를 들자면 1. useCallback(() => fn, [deps]); // deps의 데이터가 변하..

[ Optimize ] React.memo

React 최적화를 하기 위해 useMemo, React.memo, useCallback 세가지를 보통 이용 합니다 (제가 아직 배운게 이것밖에 없어서) 그중에서 React.memo에 대해 공부하며 예제를 간단히 만들어보며 연구를 했는데 괜찮은 예제가 떠올라서 이렇게 공부한걸 올리는 겸 예제를 공유 해봅니다. React.memo를 배우기전에 Memoized에 대해서 알아야하는데 Memoized는 주어진 입력값에 대한 결과를 저장함으로써 같은 입력 값에 대해 함수가 한 번만 실행되는 것을 보장하는것을 의미합니다. ( 알고리즘 방식이기도 합니다. ) React.memo는 Component의 결과값을 Memoized를 합니다 한국에서 어릴때 유행했던 벨튀(DingDong Ditch) 를 바탕으로 Compone..