React 성능 최적화를 위한 useMemo 와 useCallback

이번 포스트에서는 리액트 메모이제이션 훅으로 사용되고 있는 useMemo와 useCallback에 대해 알아보자. 위키피디아에 따르면 메모이제이션(memoization)이란 동일한 계산을 반복할 때, 이전에 계산한 값을 메모리에 저장해서 동일한 계산의 반복을 제거하면서 프로그램 실행 속도를 높이는 기술이다 리액트에서 메모이제이션이 필요한 이유 이 포스트를 읽고 있을 독자들은 어떨지 모르겠지만 필자는 리액트를 처음 접했을 때, 관련 컴포넌트가 아닌데도 불구하고 부모 컴포넌트가 변경되었다는 이유로 해당 컴포넌트 전체가 재정의/실행되어야 한다는 점이 좀 마음에 걸렸다. 이때 메모이제이션을 이용하면 이전 상태에서 변화가 없다면 메모리에 저장해두었던 값/함수를 사용하기 때문에 컴포넌트 전체를 다시 계산해서 그릴 ..

2022.03.09