useMemo & useCallback

Chiho Lee·2021년 10월 11일
0

Things to know before learing UseMemo and UseCallback

  1. 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여서 실행되는 것을 말한다. 함수가 실행될 때마다 내부에 선언되어있던 표현식(변수, 또다른 함수)도 매번 다시 선언되어 사용된다.

  2. 컴포넌트 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다.


useMemo

useMemo() == 복잡한 함수 결과값을 기억함

props가 변경이 안 된 컴포넌트는 재렌더링하지 말아주세요!

Save it for later, we don't need optimization right now.


useCallback

useCallback is a hook for rendering opimization. 훅은 전달된 콜백 함수를 memorization하여 반환하고, 이 함수는 의존하는 상태값이 변경된 경우에만 갱신된다.

const weight = usecallback(()=>{
  setWeight(weight + 1)
}, [weight]);

const age = usecallback(()=>{
  setAge(age+1)
}, [age]);

위 함수에서, weight과 age값이 변경됐을 때만 다시 함수가 생성된다(rendering)

쉽게 말해서, 그냥 함수에 useCallback을 붙이면 함수 값이 변경되기 전까지 렌더링이 안 되서 최적화가 진행된다. useMemo도 궤가 같지만 조금 더 세밀하게 최적화를 진행하기 위한 훅임


생각보다 어려워할 필요 없어보임. useMemo, useCallback 훅은 최적화에 필요한 훅이라, 개인적인 프로젝트에 당장 쓰이진 않을 것으로 보임. 물론 배포하거나 State변경이 많아져 렌더링이 자주 일어나면 모르겠지만.
profile
Hello,

0개의 댓글