ReactJS 메모이징

React.memo()와 useMemo(), useCallback()은 참조하는 주소를 고정하는 친구이다.

---

memo()

// ./src/Parent.tsx
import Child from "./Child";

const Parent = () => {
	return (
      <div className="parentClass">
        <Child></Child>
      </div>
    );
}

export default Parent;

// ./src/Child.tsx
const Child = () => {
	return <div>child</div>;
}

export default React.memo(Child);

{
  type: "div",
  props: {
    "class": "parentClass"
  },
  children: [
    {
      type: "div",
      props: null,
      value: "child",
    },
  ]
}

ReactJS는 컴포넌트를 return하지 않는다. 이는 문법적 설탕일 뿐, 사실 이는 컴포넌트에 대한 정보를 담고있는 객체를 return한다.

컴포넌트의 props로 콜백함수를 넘겨주는 경우가 종종있다. (onClick 등)
함수는 일급 객체이다. 따라서, React.memo()와 같이 객체의 값이 변하지 않더라도 메모리 주소가 변하기 때문에 JS엔진은 props가 달라졌다고 판단하고 re-rendering을 진행한다.

---

useCallback()

re-render방지용

컴포넌트엔 React.memo()를 사용했지만 콜백함수에는 useCallback를 사용한다.

const countHandler = useCallback(() => {
	setCount((prev) => prev += 1);
}, []);

---

의존성 배열을 추가한 경우

//클릭마다 Unit을 증가시킴.
const countHandler = useCallback((unit) => {
	setCount((prev) => prev += unit);
}, [unit]);

//클릭마다 count를 증가시키는 Unit을 1 증가시킴.
const increaseUnitHandler = useCallback(() => {
	setUnit((prev) => prev += 1);
}, []);

---

useMemo()

const countHandler = useMemo(() => {
  for(let i = 0; i <= 10000000) {}
  //겁나 오래 걸리는 작업
}, []);

---

의존성 배열을 추가한 경우

let restart = false;

const countHandler = useMemo(() => {
  for(let i = 0; i <= 10000000) {}
  //겁나 오래 걸리는 작업
}, [restart]);