useMemo & useCallback Hooks - 풀스택개발 EastFlag

상태관리는 useState 훅으로 라이프사이클메서드는 useEffect 훅을 사용하였다. 이 두가지 컴포넌트는 클래스 컴포넌트를 사용하지 않고 펑션 컴포넌트로만 구성한다면 반드시 사용해야 하는 훅이다.

거기에 비해 useMemo, useCallback 같은 훅은 렌더링시 성능 향상을 위한 훅이라서 필수적인 훅은 아니나 성능 최적화를 위해서 필요한 훅이다.

펑션 컴포넌트는 상태가 바뀌거나 props 가 변하면 렌더링이 일어나는데 클래스 컴포넌트는 render 함수를 호출해서 렌더링 하지만 펑션 컴포넌트는 펑션을 다시 호출해서 리턴되는 리액트 엘리먼트를 렌더링한다.

또한 포함되어있는 자식 컴포넌트는 최적화하지 않으면 무조건 다시 렌더링이 된다.

const memoizedValue = useMemo(function, deps)

deps 의 값이 변경이 되었을때만 function이 실행되고 실행되어서 리턴된 값이 반환된다. memoizedValue 타입은 value 이다.

value 이므로 리액트 엘리먼트에서는 {memoizedValue} 로 사용해야 한다.

a=2 버튼을 누르게 되면 a의 상태가 변하게 되므로 렌더링이 일어난다. 즉, 펑션 컴포넌트가 다시 실행된다. 렌더링이 일어나면서 aPlubB, bPlusC 함수가 실행이 되어야 하는데, deps가 b, c가 변경되었을 경우만 실행하므로 실행되지 않는다.

See the Pen useMemo example by LeeDongKee (@eastflag) on CodePen.default

const memoizedFunc = useCallback(function, deps)

리턴타입이 펑션이다.