[useCallback, useMemo] 함수와 연산된 값 재사용

useMemo

useMemo를 이용해서 이전에 연산해놓은 값을 재사용할 수 있다.

useMemo(함수, [deps])

주로 성능을 최적화 해야하는 상황에서 사용한다.
deps 배열 안에 있는 값이 바뀌어야만 실행된다.
즉, 특정 값이 바뀔 때만 함수를 실행해서 연산을 처리해준다.

만약 값이 바뀌지 않았다면 이전의 값을 그대로 가져와서 재사용할 수 있게 해준다.

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

users가 바뀔 때만 수를 세는 함수가 실행이 된다.
바뀌지 않았다면 이전에 계산한 값을 재사용한다.

React.memo

컴포넌트에서 리렌더링이 불필요할 때는 이전의 값을 그대로 사용할 수 있게 해준다.
(컴포넌트 렌더링 값 재사용)

props가 바뀌었을 때만 리렌더링 되도록 해주기 때문에, 리렌더링 최적화 가 가능하다.

🔥 컴포넌트를 만들고 내보낼때 React.memo로 감싸주면 된다.

export default React.memo(CreateUser);

props를 비교해서, 이전 상태와 같으면 렌더링을 하지 않겠다고 지정해줄 수 있다.

export default React.memo(UserList, 
     (preProps, nextProps) =>
      preProps.users === nextProps.users);

useCallback

이전에 만들어 둔 함수를 새로 만들지 않고, 재사용할 수 있게 해준다.
useCallback(함수, [deps])

useMemo 와 비슷한 역할을 하지만, 함수를 위한 hook 이라고 기억하면 될 것 같다.

useCallback을 사용해서 함수의 props가 바뀌지 않았다면 가상 돔에 리렌더링 되지 않도록 할 수있다.

//[변경 전]
const onChange = e => {
  const {name,value} = e.target;
  setInputs({
    ...inputs,
    [name] : value
  });
};

// 기존에 만들어 둔 함수를 감싸주면 된다.
// [변경 후 : 의존하고 있는 inputs 값을 deps에 넣어주었다.]
const onChange = useCallback(e => {
  const {name,value} = e.target;
  setInputs({
    ...inputs,
    [name] : value
  });
}, [inputs]);

🚨 단, useCallback과 useMemo를 사용한다고 해서 반드시 성능이 좋아지는 것은 아니다.

• 오히려 더 불필요하게 많은 코드가 호출될 수도 있다.
• 따라서 반드시 컴포넌트를 최적화할 수 있을 때만 사용해야 한다!