useMemo()의 의존성 배열과 create 함수

 

useMemo()훅은 의존성 배열에 변수가 변했을 경우에만 create 함수를 호출해서 결과값을 반환한다고 했다.

 

https://moo-you.tistory.com/1072

useMemo : 리액트 훅 사용법

 

여기서 create 함수란 React훅 안에서 값을 계산하거나 반환하는 함수를 가리킨다. 다시 말해 useMemo()나 useEffect()안에 정의된 연산을 수행하는 함수를 의미한다.

 

const memoizedValue = useMemo(() => {
  // 여기서 "expensiveComputation"이 바로 create 함수의 역할을 하는 부분
  return expensiveComputation(data, user);
}, [data, user]);

 

즉 create 함수는 useMemo()같은 훅에서 값을 계산하는 함수를 지칭하는 표현이다.

 

그러니까 useMemo()가 제대로 동작하려면 create 함수가 참조하는 모든 외부변수 의존성 배열에 넣어줘야 한다.

이 작업은 수동으로 모두 넣어줘야 한다.

이 때 eslint-plugin-react-hoks 패키지를 사용하면 의존성 배열이 잘못 되었을 경우 자동으로 경고 표시를 해줘서 올바르게 설정할 수 있도록 도와준다.

여기에 대한 자세한 설명은 아래 링크를 참고

 

https://www.npmjs.com/package/eslint-plugin-react-hooks

eslint-plugin-react-hooks