useMemo와 useCallback의 이해

[🤔 useMemo와 useCallback은 왜 나타난걸까?] 리액트는 매 렌더링마다 새로운 상태 변화에 따른 스냅샷을 남깁니다. 이를 가상 돔이라고 부릅니다. 가상 돔은 돔과 비슷하게 생겼지만 실은 JS 객체로 구성되어 있습니다. 리액트는 랜더링마다 새로운 가상 돔을 생성하고 기존 스냅샷과 비교하여 변경점을 찾아 바꿉니다. 이렇기에 리액트는 이미 빠른 렌더링을 하도록 설계되어 있지만, 때때로 그렇지 않은 경우도 있습니다. 그 때 useMemo, useCallback을 통해서 두가지 이점을 누릴 수 있습니다. 1. 렌더링 횟수를 줄일 수 있습니다. 2.렌더링 중 일어나야 하는 작업을 줄일 수 있습니다. 정리하자면, 이 두 기능을 통해 내가 정말 업데이트 하고 싶은 것들만 업데이트 할 수 있습니다. 1️⃣ 값을 기억하는 useMemo 🔖 useMemo는 계산된 값을 기억하고 싶을 때 사용합니다. 예를 들어 흐르는 시간을 보여주는 시계와 입력값을 받아 1에서 입력값까지 보여주는 표가 같은 컴포넌트 안에 있다고 가정합시다. 시계는 1초마다 렌더링 하고 숫자표도 그 때마다 렌더링됩니다. 이 숫자가 100일 때는 문제 없을 수 있지만, 만약 1000억으로 입력값이 들어온다면 1초마다 1000억까지 렌더링을 해야합니다. 이 때 useMemo를 통해 렌더링을 덜 할 수 있습니다. useMemo를 통해 입력값이 변경될 때만 숫자표에 들어갈 숫자들의 배열을 새로 만든다면 렌더링 부담을 줄일 수 있습니다. 💡Tip. useMemo를 쓰지 않고도 같은 효과를 내는 법 아까 시계와 표가 같은 컴포넌트에 있다고 했습니다. 이를 두 개로 쪼개어 같은 부모를 가진 형제 컴포넌트로 만들어도 문제가 해결됩니다. 렌더링으로 인한 변경은 위에서 아래로만 작용되기 때문입니다. 2️⃣ 함수를 기억하는 useCallback 🔖 useCallback은 useMemo의 문법적 설탕입니다. useMemo는 반환값을 함수로 감싸서 매개변수로 넣습니다. useMemo를 통해 함수를 저장하려고 하면 함수를 반환하는 함수를 만들어야 하니 useCallback을 따로 만들어준 것 같습니다. [🤷‍♀️배열, 객체, 함수를 prop으로 내려주는데 변한 게 없어도 자꾸 리렌더링 돼요] 리렌더링 시 컴포넌트의 객체와 배열은 이전과 다릅니다(값이 같더라도). 객체와 배열을 비교할 때 내부 값을 비교하는 것이 아니라 메모리 참조값으로 비교하기 때문입니다. 따라서 useCallback이나 useMemo없이 이 내부 값을 하위 prop으로 넘기는 경우 React.memo를 사용하더라도 리렌더링이 발생합니다. prop으로 전달하는 값에 이 훅을 적절하게 활용하면 리렌더링 횟수의 감소 효과를 기대할 수 있을 것입니다. [🙋‍♀️컴포넌트의 리렌더링 최적화 말고도 사용하면 좋은 예가 있을까요?] 1. 자주 쓰는 커스텀 훅에서 내부 함수를 useCallback으로 감싸보세요. 2. context provider에서 value를 전달할 때 객체를 전달하는 경우라면 useMemo 사용을 고려해보세요