React의 useMemo와 useCallback

공부한 내용을 정리한 글입니다 
내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요.
배움에 큰 도움이 됩니다. 🖋

 

 

useMemo

---

const cachedValue = useMemo(calculateValue, dependencies)

 

 

함수를 실행하면 그 함수가 이용할 수 있는 실행 환경이 만들어진다. 외부적으로는 자신이 선언된 위치의 환경을 참조하고, 내부적으로는 함수 내부에 선언되어 있던 변수, 함수 등의 식별자를 등록하고 관리한다. 함수형 컴포넌트는 jsx를 반환하는 함수다. 컴포넌트의 렌더링은 함수의 실행을 의미한다. 렌더링이 된다는 것은 내부 식별자를 선언하고 관리하는 작업 또한 이루어진다는 것을 말한다.

useMemo는 메모제이션된 함수의 실행 결과값을 반환한다. 함수 내부가 복잡하고 연산량이 많을때 이전 결과값을 재사용하기 위해 사용한다.

 

useMemo를 사용해도 내부의 식별자를 최초로 등록하고 관리하는 작업은 필요하다. 따라서 첫 번째 렌더링을 더 빠르게 만들지는 않는다 . 그러나 이후에 불필요한 업데이트 작업을 건너뛰는 데 도움을 준다. useMemo로 전달된 함수는 렌더링 중에 실행된다.

useCallback

---

const cachedValue = useMemo(calculateValue, dependencies)

 

메모제이션된 함수를 반환한다. 자식 컴포넌트를 React.memo로 감싸 최적화 된 경우 부모 컴포넌트에서 함수를 useCallback으로 감싸 전달하지 않으면 매 렌더링마다 함수가 다시 생성되므로 자식 컴포넌트를 최적화한 의미가 없다. 이럴 경우 함수가 재생성 되는것을 방지하기 위해 사용한다.

 

 

함수의 메모제이션 과정

---

React는 다음 렌더링에서 종속성이 이전 렌더링에 전달된 것과 같은지 비교한다(Object.is로 비교). 종속성이 변경되지 않은 경우 이전과 동일한 함수를 반환하고 변경됐을 경우 이번 렌더링에서 전달한 함수를 반환한다 .

 

 

 

 

 

참고

---

https://beta.reactjs.org/reference/react/useMemo

useMemo

https://beta.reactjs.org/reference/react/useCallback

useCallback

https://yceffort.kr/2022/04/best-practice-useCallback-useMemo

Home

https://leehwarang.github.io/2020/05/02/useMemo&useCallback.html

이제는 사용해보자 useMemo & useCallback - 이화랑 블로그