불필요한 렌더링을 막고 최적화하기 위해서 사용되는 리액트 훅이다.
memoization
컴퓨터 프로그램이 동일한 계산을 반복해야 할 때 똑같은 계산을 반복 수행하는 것이 아닌, 이전에 계산한 값을 메모리에 저장해두고 사용함으로써 프로그램 실행 속도를 빠르게 하는 기술을 의미한다.
Component실행순서
- 함수형 Component는 jsx를 반환한다.
- Component가 렌더링 된다는 것은 해당 Component를 호출했다는 것, 그렇다면 기본적으로 선언된 변수나 함수는 초기화된다.
- Component에서 State 값이 변경되면, 해당 Component(부모)와 하위 Component(자식)는 재 렌더링 된다.
React에서는 이러한 구조들을 통해 작동하기 때문에 우리는 한 번만 선언해서 메모리를 유지해야 하는 상황이 발생하면, 데이터 유지가 안 되는 상황이 발생한다.
이 부분을 해결하기 위해 React는 useMemo와 useCallback이 필요하다.
useMemo와 useCallback
간단히 설명하자면
useMemo는 복잡한 함수의 결과값(return값)을 기억하고 useCallback은 함수 자체를 기억하고 있는 것이다.
자식컴포넌트에게 함수를 props로 넘겨줄 땐 필수적으로 useCallback을 사용해야 한다.
매번 함수가 실행되고 그 함수를 Props로 넘겨주면 "오잉 새로운 props군!" 하고 같은 함수를 새롭게 받아들이기 때문useMemo(() => fn, deps) useCallback(fn, deps) useMemo((...)=>fn, deps) === useCallback(fn, deps)
useMemo
React는 state가 변경될 때마다 다시 렌더링 되는데, 간혹 필요없는 것들을 계속해서 불러오곤 한다. 이는 자원의 낭비로 이어질 수 있고, 더 복잡한 서비스에서는 성능을 저하시키는 요인이 된다. 따라서 특정 상황에만 특정 동작을 하도록 유도할 필요가 있는데, 이때 useMemo라는 hook을 사용하여 성능을 최적화할 수 있다.
하지만, 하위 컴포넌트내에서 각각의 값을 가공하는 함수를 처리하는 로직이 복잡하지 않다면 오히려 useMemo 를 사용하는 것이 더욱 비효율적일 수 있다.
예를들어 input박스에 값을 입력할 때마다 불러와지는 함수의 경우 값이 완전히 변경되었을 때만 한번만 호출되게끔 하는 것.
의존 배열 안에 넣은 내용이 바뀌면 함수를 호출해서 값을 연산해주고, 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 한다.
useCallback
useCallback은 useMemo와 비슷한 함수이다.
React에서 컴포넌트가 다시 렌더링될때 컴포넌트 안에 선언된 함수들을 새로 생성된다. 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야할 컴포넌트의 개수가 많아지면 최적화해주는 것이 효율적이며 이때 useCallback hook을 활용할 수 있다.
그 이외 참고 할 블로그
