useCallback, useMemo 활용해보기

책으로 읽었을때는 useEffect와 비슷하다는 것만 기억에 남았다.

왜 사용할까? 랜더링 관련해서 함수가 언제나 재생성 되기 때문인데, 부모 컴포넌트가 재랜더링 된다면 자식 컴포넌트에서도 재랜더링이 일어나기 때문에 자원이 낭비된다. 그렇지만 useCallback/useMemo를 사용하면 랜더링될 때 같은 함수를 cache에서 불러온다. useCallback의 경우 함수를 캐싱하고 useMemo의 경우 값을 캐싱한다.

 

이해했으니, 써야 하는데, 익숙하지 않기 때문에 처음부터 생각하는게 어렵다면,

코드를 짠 다음, 해당 익명 함수에 useMemo/useCallback( 함수 , [] )을 씌워주는 것으로 적용해보면 될 것 같다.

 

벨로퍼트와 함께하는 모던 리액트: useMemo

벨로퍼트와 함께하는 모던 리액트: useCallback

 

useMemo, useCallback의 경우 공통적으로 다음과 같은 구조이다.

const 변수 = use함수(( ) => { },[ ])

차이점을 살펴보자면, useMemo의 경우 콜백함수로 들어간 함수가 값을 리턴하는데 그 값이 변수로 들어가는 것이고

useCallback의 경우 어떤 값에 대한 리턴이라기보다 함수(여기서는 set함수)를 리턴한다.

1. useMemo

function countActiveUsers(users) {
  return users.filter(user => user.active).length;
}

const count = useMemo(() => countActiveUsers(users), [users]);

=> useMemo의 경우

2. useCallback

//useCallback을 사용하지 않은 코드
const onRemove = id => {
  setUsers(users.filter(user => user.id !== id));
};

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

//대입하는 방법
<UserList users={users} onRemove={onRemove} onToggle={onToggle} />

(*다시 차이점을 살펴보자면*)

useMemo의 경우, 함수를 표현식으로 작성했다고 하더라도, 할당할 때 useMemo를 사용하지 않으셨다.

const count = useMemo(   , [ ] )처럼, 따로 변수를 선언하고 대입하는 방식으로 활용하셨다. 물론 여기서는 countActiveUsers함수를 선언문으로 작성하셔서 그런가..?

useCallback의 경우에는 함수 표현식에서 할당부에 useCallback을 사용하셨다. 

 

정리해보면 useMemo의 경우 return하는 값이 있고, useCallback의 경우에는 없다.