[React] useCallback - 함수 memoization

react

이 글은 별코딩의 React Hooks에 취한다 - useCallback 짱 쉬운 강의 | 리액트 훅스 시리즈영상을 정리한 글입니다. 

useMemo에 대한 개념을 익히고 useCallback을 공부하는 것을 추천합니다..!! 제가 작성한 블로그 글은 다음과 같습니다!! 

[핀테크 서비스 프론트엔드 개발자 취업 완성 2기/React] - [React] useMemo, memoization 공부하기!

Memoization : 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술 

위키백과

1. useCallback

1-1. 개념(useMemo와  useCallback의 차이점)

useMemo는 콜백 함수로 return해준 값을 memoization해준다!! 

useMemo(()=>{
	return value;
},[item])

여기에선 value를 memoization해주는 것!! 

하지만 useCallback의 경우 인자로 전달한 콜백 함수 자체를 memoization해준다!  

useCallback(()=>{
	return value;
},[item])

즉 () => {return value}가 memoization된다. 

 

js에서의 함수는 객체의 한 종류이다. (deep dive에서 일급객체이기 때문에 변수에 할당할 수 있다고 했던 것 같다!) 

리액트에서 함수형 컴호넌트는 정말 함수이다. 그래서 함수형 컴포넌트가 렌더링 된다는 것은 component 함수가 호출되고 컴포넌트 내부에 있는 모든 변수들이 초기화된다.

만약 calculate를 이렇게 할당한다면 렌더링이 될 때마다 계속 초기화하고 새로운 함수를 할당하게 된다. 하지만 useCallback hook으로 다음과 같이 감싸주면, 컴포넌트가 다시 렌더링 되더라도 memoize 된 함수를 재사용할 수 있다. 

즉 컴포넌트가 제일 처음 렌더링 될 때만 calculate를 초기화해주고 이후에 렌더링 될 때는 변수가 새로운 함수 객체를 할당받는 것이 아니라 이전에 할당받은 객체를 계속해서 가지고 있으면서 사용할 수 있게 된다. 

 

2. 실습

2-1. 실습1- 기본적인 사용예제

 true/false 버튼을 눌러서 다시 렌더링 되어도 someFunction을 다시 초기화하지 않는다. 

someFunction이 변경될 때마다 useEffect가 실행되면서 컴포넌트가 다시 렌더링 되지만, someFunction은 초기화 되는 것이 아니라 useCallback에 의해서 함수 자체가 memoize되서 재사용한다. 그리고  number의 값이 바뀔때만 somefunction에 할당된 함수를 다시 memoization해준다. 

 

2-2.실습2  - 

 

size를 조정하면 createBoxStyle에 콜백으로 넘겨준 함수를 다시 memoization 하지만 isDark의 값이 변화되었을 때는 초기화 하지 않고 memoize된 값을 사용한다! 

나중에 다크모드 같은...? 것을 구현할 때 필요할까...? ㅎ..