[013] 리액트 (React) 배우기 - useMemo Hook 사용

안녕하세요~ totally 개발자입니다.

 

useMemo

 

오늘 다뤄볼 부분은 useMemo 훅입니다. useMemo는 useCallback과 유사합니다. useMemo와 useCallback 모두 Memoization을 활용하는 훅으로, Memoization은 이전에 이미 수행했던 계산의 결과값을 이미 다른 곳에 저장을 해두고 동일한 값이 입력될 때 재사용하는 프로그래밍 기법입니다. 그래서 성능을 높이고 최적화할 때 많이 사용됩니다. useMemo는 Memoization된 값을 반환하고 useCallback은 Memoization된 함수를 반환하는 특징이 있습니다.

 

바로 예제 실습을 통해 살펴보도록 하겠습니다.

 

Step 1: Counter.js 컴포넌트 파일을 생성하여 useMemo와 useState를 import 해줍니다.

 

 

 

Step 2: 4,5 번째에 name과 count의 useState를 입력해주시고 7~12번째 줄에 연산을 할 수 있는 함수를 넣어줍니다. 여기에서 2개의 useState를 사용하는 것은 name이 변할 때에 재랜더링 될 때 이 계산 실행도 같이 되는지 여부를 보려고 하는 용도입니다.

 

 

Step 3: 15번째 줄에 useMemo 훅을 사용해줍니다. [count] 라고 명시했는데 이 뜻은 count가 변할 때 getTotalSum 함수를 다시 실행하라는 의미입니다. 만약 공백의 배열 []이 들어간다면, 최초에 마운트되었을 때 1번만 실행됩니다. 그리고 useState를 위해 17~23번째에 함수들을 작성해줍니다.

 

 

 

Step 4: 필요한 HTML 태그들을 넣어 변수들을 넣어주면 완성입니다.

 

 

 

Step 5: App.js 업데이트해주시면 됩니다.

 

 

 

Step 6: 실행 결과는 다음과 같습니다.

 

 

[전체 소스 코드]