React useMemo()

Creator

Creator

Seonglae Cho

Created

Created

2021 Apr 2 14:20

Editor

Editor

Seonglae Cho

Edited

Edited

2024 Feb 11 4:15

Refs

Refs

Return Memoized Value

연산된 값을 useMemo라는 Hook 을 사용하여 재사용

성능 최적화

렌더링 될때마다가 아니라 주어진 값이 변경될 때만 특정 함수를 호출

React Hooks: useMemo 사용법

React Hooks 중 하나인 useMemo 함수를 왜/언제/어떻게 써야하는지 알아보겠습니다. useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 잠깐 짚고 넘어가겠습니다. memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다.

React Hooks: useMemo 사용법

https://www.daleseo.com/react-hooks-use-memo/

이제는 사용해보자 useMemo & useCallback

이제 useState와 useEffect에 완전히 익숙해졌다고 느꼈는데, 컴포넌트 내에서 저 두 개의 hook 만으로도 props나 state를 다루는 로직에 관련된 기본적인 기능을 모두 구현할 수 있기 때문에 굳이 useMemo나 useCallback 을 사용할 필요를 느끼지 못했다. 물론 useMemo와 useCallback 은 리액트의 렌더링 성능 최적화를 위한 hook 이기 때문에 필수적으로 사용할 필요는 없다.

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

Recommendations

//////////////