useCallback과 useMemo

 

useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.

  const signUp = (username, password, name, email, url) => {
  	 authService
        .signup(username, password, name, email, url)
        .then(user => setUser(user))
  }

위 예제는 회원 가입을 하는 변수입니다. authService라는 props의 signup에 유저 정보를 주어서 회원가입을 시키는 함수 입니다.

 

이 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어집니다. 함수를 선언하는 것 자체는 사실 메모리도, CPU 도 리소스를 많이 차지 하는 작업은 아니기 때문에 함수를 새로 선언한다고 해서 그 자체 만으로 큰 부하가 생길일은 없지만, 한번 만든 함수를 필요할때만 새로 만들고 재사용하는 것은 여전히 중요합니다.

 

useCallback을 사용하여 바꿔줘 봅시다

 

const signUp = useCallback(
    async (username, password, name, email, url) =>
      authService
        .signup(username, password, name, email, url)
        .then(user => setUser(user)),
    [authService]
  )

 

이렇게 해주면 새로운 username, password, name, email, url이 입력되었을 때 작동하게 됩니다.

 

function MyComponent({ x, y }) {
  const z = compute(x, y);
  return <div>{z}</div>;
}

랜더링이 일어날 때 마다, compute 함수의 인자로 넘어오는 x와 y 값이 항상 바뀌는 게 아니라면 굳이 compute 함수를 계속 호출할 필요가 있을까요? 그렇기 때문에 결과값이 동일할 경우 memoization을 사용하여 그대로 사용합니다.