useMemo: 값 재사용(rerender할때마다 초기화하지 않고 기억해두고 사용), useCallback: 함수 재사용

어떤 컴포넌트에 a,b,c,d,....등 많은 state가 있고

어떤 값 (m)은 a의 유효 count를 세는 등 a가 바뀔때만 영향받는 값

const countActiveList = (a) => a.filter(n => n.active).length;

const count = countActiveList (a);

그냥 위와 같이 쓰면 a, b, c, d 각각이 바뀌어도 virtualDOM 리렌더가 일어나며 리렌더될때마다 m값은 매번 새로 계산됨

이것을 방지하기 위해 useMemo사용

const m = useMemo(()=> countActiveList (a),[a])

 

• 화면이 랜더링될때마다 일반 변수는 계속 초기화되는데, 기억해 두어야 할 필요가 있을 때 사용
• 기억해야 하는 값이긴 하지만 화면에 직접 나타나진 않을 때 useState대신 useMemo사용

 

useMemo가 값 재사용이라면 useCallback은 함수재사용

const onRemove = id => {
  // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
  // = user.id 가 id 인 것을 제거함
  setUsers(users.filter(user => user.id !== id));
};

=>

const onRemove = useCallback(
    id => {
      // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
      // = user.id 가 id 인 것을 제거함
      setUsers(users.filter(user => user.id !== id));
    },
    [users]
  );