React Hooks(useMemo, useCallback)

Hook

---

• Hook은 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메서드를 의미합니다.
• Hook은 class가 아닌 function으로만 React를 사용할 수 있게 해주는 것이기 때문에 클래스형 컴포넌트에서는 동작하지 않습니다.

이 Hook은 여러가지 사용 규칙 있으며, 규칙을 지키지 않으면 에러가 발생합니다.

 

1. 리액트 함수의 최상위에서만 호출해야 합니다.

• 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 제대로 동작하지 않습니다.
• useState나 useEffect 같은 Hook들이 여러 번 사용될 수 있는데, React는 이 Hook을 호출되는 순서대로 저장을 해놓습니다.
• 그런데 조건문, 반복문 안에서 Hook을 호출하게 되면 호출되는 순서대로 저장을 하기 어려워지게에 에러가 발생합니다.

if(counter) {
    const [sample, setSample] = useState(0); //에러
}

2. 오직 리액트 함수 내에서만 사용되어야 합니다.

• Hook은 react의 문법이기에 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해서는 안 됩니다.

window.onload = function () {
    useEffect(() => {
        // 에러
    }, [counter]);
}

 

useMemo

---

• useMemo는 React Hook 중 하나로, 특정 값(value)을 재사용하고자 할 때 사용하는 렌더링 최적화를 위한 Hook입니다.
• useMemo는 함수와 의존성 배열을 인자로 받는데, 렌더링 시 의존성 배열이 변경되지 않는 한 이전 함수의 결과를 재사용합니다.

const result = useMemo(() => calculate(value), [value]);

• 위와 같은 경우, value를 인자로 받아 실행하는 calculate함수를 useMemo의 인자로 넣었습니다.
• value의 값에 따라 calculate의 결과가 달라지기에, value를 의존성 배열에 넣어 value값이 달라 질때만 calculate을 실행합니다.
• 이렇게 이전의 결과값을 저장하여 사용하는 것을 메모이제이션이라 합니다.

 

 

useCallback

---

• useCallback는 useMemo와 마찬가지로 메모이제이션 기법을 이용한 렌더링 최적화를 위한 Hook입니다.
• useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook입니다.
• useCallback도 함수와 의존성 배열을 인자로 받는데, 의존성 배열이 변경되지 않으면 이전의 결과를 가져옵니다.
• useMemo와 차이점이 없어 보이지만, useCallback은 참조 동등성을 위해 사용합니다.

function Calculator({x, y}){

	const add = useCallback(() => x + y, [x, y]);

	return 
	<>
      <div>
		{add()}
      </div>
	</>;
}

• 자바스크립트에서 함수는 객체로, 객체는 메모리에 저장할 때 값을 저장하는 게 아니라 값의 주소를 저장하기합니다.
• 이 때문에 반환하는 값이 같을지라도 일치연산자로 비교했을 때 false가 출력됩니다.
• react에서는 리렌더링 시 함수를 새로이 만들어서 호출하기에, 값이 같더라도 같은 함수로 취급하지 않습니다.
• 따라서 useCallback을 이용해 함수 자체를 저장해서 다시 사용하면 함수의 메모리 주소 값을 저장했다가 다시 사용하는 결과를 보여줍니다. 
• 이를 통해, React 컴포넌트 함수 내에서 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop으로 넘길 때 예상치 못한 성능 문제를 막을 수 있습니다.