Memoization 썸네일형 리스트형 React Hook 정리 - useCallback 지난 번 useMemo와 함께 Memoization 기법을 활용해 컴퍼넌트를 최적화시켜주는 훅이다. useMemo의 경우 값을 Memoization하여 재사용할 수 있다면 useCallback은 함수를 재사용할 수 있게 해준다. const plusone = (num) => { return num + 1; }; const plusone = useCallback((num)=>{ return num + 1; }, [item]) 위 코드와 같이 plusone을 useCallback으로 함수를 감싸서 사용하면 된다. useCallback()은 2개의 인자를 받는다. 하나는 우리가 Memoization해야 할 콜백함수, 두번째는 의존성 배열이다. 즉, 의존성 배열의 값이 변경되지 않는 이상 다시 초기화되지 않는다... 더보기 React Hook 정리 - useMemo 컴포넌트 최적화를 위해 사용되는 대표적인 Hook인 useMemo, useCallback 중 useMemo에 대해 정리해보려고 한다. 우선 useMemo를 사용하기에 앞서 아래 용어를 알아야한다. Memoization: 동일한 값을 리턴하는 함수를 반복적으로 호출할 경우 처음 계산된 값을 메모리에 저장하여 이를 재사용하는 기법 함수형 컴포넌트를 사용하는 코드에서 컴포넌트가 렌더링된다는 의미는 해당 컴포넌트 함수가 호출된다는 의미이다. 즉, 호출될때마다 함수 내의 모든 내부 변수를 그때 그때 초기화 한다는 의미이다. 일례로 아래와 같은 코드가 있다고 가정하자. function Component() { const value = heavyTask(); return {value} } function heavyT.. 더보기 이전 1 다음
