useMemo, useCallback 모두 렌더링 성능을 최적화하는 상황에서 사용하는 것으로 알려져있다. 하지만 무분별하게 사용한다면 결국 메모제이션용 메모리가 추가로 필요하기 때문에 적절히 사용해야 한다고 알고 있는데...!
오늘 포트폴리오를 정리해보면서 사용되지 않고 메모리만 차지하고 있는 코드들을 정리하는데 eslint가 이 부분을 지적했다.
(전에도 깔려있던걸로 기억하는데 왜 지금???)
검색 키워드에 따라 데이터를 받아오는데 useCallback이 유의미할까🧐
매 렌더마다 useMemo를 호출하고 메모리를 할당하고 적용된 레퍼런스는 재활용을 위해 가비지 컬렉션에서 제외되기 때문에 과연 적절한 대안이 될 수 있는지 따져봐야 한다.
dev tool로 비교해보지만 렌더링 성능이라니 이 데이터는 한 글자만 매치되어도 검색이 되어서 사실 뭐가 나아진건지 잘 모르겠다.
-> 확실한 차이가 보이지 않는다면 안뇽👋 이럴 땐 보수적으로 접근하겠숴
memoization 메모이제이션이란?
기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그램 기법을 말한다. 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 어플리케이션의 성능을 최적화할 수 있다.
- useMemo가 특정 value를 재사용한다면(함수를 바로 실행하고 상태값을 반환한다.),
- useCallback은 특정 함수를 재사용(해당 컴포넌트가 렌더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환)한다.
useMemo는 함수의 연산량이 많을때 이전 결과값을 재사용하는 목적이고, useCallback은 함수가 재생성 되는것을 방지하기 위한 목적이다.
즐거운 도전중입니다:)