[React.js] Hooks

ko.reactjs.org/docs/hooks-reference.html

Hooks API Reference – React

useMemo Hook는 렌더링하는 과정에서 특정 값이 바뀌었을 때(ex/입력값이 변경되었을때)만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 것이다.

useMemo(() => '변경되면 실행할 작업', [변경되는 요소])

useCallback Hook은 리렌더링 될 때 새로운 함수 인스턴스가 생성되는 것을 방지한다( 리렌더링시 함수를 다시 만드는 걸 방지함)

const memoizedCallback = useCallback(
  () => {
   doSomething(a, b); //새로 만들 함수의 내용
  },
  [a, b] //새로 만들 경우의 조건
);

useCallback의 첫번째 파라미터에는 생성하고 싶은 함수, 두번째 파라미터는 배열을 넣는다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지를 명시하면된다.

useCallback('새로만들 함수' , [새로 만들어지는 경우의 조건 값])

 

useMemo와 useCallback의 사용법

ideveloper2.dev/blog/2019-06-14--when-to-use-memo-and-use-callback/

Steady Study