React Hook의 사용규칙
-
리액트 함수의 최상위에서만 호출해야 합니다.
- 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 우려가 있습니다.
-
오직 리액트 함수 내에서만 사용되어야 합니다.
- 이는 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해서는 안 된다는 의미입니다.
useMemo
useMemo를 사용하는 이유
컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있습니다. 그러나 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼칩니다.
React Hook은 함수 컴포넌트가 상태를 조작하고 및 최적화 기능을 사용할 수 있게끔 하는 메소드라고 했습니다. 그 중 렌더링 최적화를 위한 Hook도 존재하는데,
useCallback과 useMemo가 바로 그 역할을 하는 Hook입니다.
useMemo사용 예제
import { useMemo } from "react";
function Calculator({value}){
const result = useMemo(() => calculate(value), [value]);
//함수 calculate()는 내부적으로 복잡한 연산을 해야 하는 함수라
//계산된 값을 반환하는 데에 시간이 몇 초 이상 걸린다고 가정
return <>
<div>
{result}
</div>
</>;
}이런 식으로 useMemo를 호출하여 calculate를 감싸주면, 이전에 구축된 렌더링과 새로이 구축되는 렌더링을 비교해 value값이 동일할 경우에는 이전 렌더링의 value값을 그대로 재활용할 수 있게 됩니다. 이는 메모이제이션(Memoization) 개념과 긴밀한 관계가 있습니다.
메모이제이션 : 기존에 수행한 연산의 결과값을 메모리에 저장을 해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다.
위와 반대로useMemo를 사용하지 않았고 calculate 함수가 계산된 값을 반환하는 데에 시간이 많이 걸린다고 가정했을때 컴포넌트가 렌더링 될 때 마다 이 함수는 다시 호출될 것이고 그 때마다 몇 초씩 소요 될 것입니다.
useCallback
-
useMemo와 차이점
useMemo는 값의 재사용을 위해 사용하는 Hook이라면,
useCallback은 함수의 재사용을 위해 사용하는 Hook입니다. -
useCallback사용예제
function Calculator({x, y}){
const add = () => x + y;
return <>
<div>
{add()}
</div>
</>;
}Calculator 컴포넌트 내에는 add라는 함수가 선언이 되어 있는 상태입니다.
add 함수는 props로 넘어온 x와 y 값을 더해 <div> 태그에 값을 출력하고 있습니다.
이 함수는 해당 컴포넌트가 렌더링 될 때마다 새롭게 만들어질 것입니다.
useMemo와 마찬가지로, 해당 컴포넌트가 리렌더링 되더라도 그 함수가 의존하고 있는 값인 x와 y가 바뀌지 않는다고 생각해 봅시다. 그렇다면 함수 또한 메모리 어딘가에 저장해 뒀다가 다시 꺼내서 쓸 수 있을 것입니다.
/* useCallback를 사용하기 전에는 꼭 import해서 불러와야 합니다. */
import React, { useCallback } from "react";
function Calculator({x, y}){
const add = useCallback(() => x + y, [x, y]);
return <>
<div>
{add()}
</div>
</>;
}useCallback Hook을 사용하면 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환합니다. 즉 x와 y값이 동일하다면 다음 렌더링 때 이 함수를 다시 사용합니다.
- useCallback의 참조 동등성
React는 JavaScript 언어로 만들어진 오픈소스 라이브러리이기 때문에 기본적으로 JavaScript의 문법을 따라갑니다. javaScript에서 함수는 객체입니다.
객체는 메모리에 저장할 때 값을 저장하는 게 아니라 값의 주소를 저장하기 때문에,
반환하는 값이 같을 지라도 일치연산자로 비교했을 때 false가 출력됩니다.
그러나 useCallback을 이용해 함수 자체를 저장해서 다시 사용하면 함수의 메모리 주소 값을 저장했다가 다시 사용한다는 것과 같다고 볼 수 있습니다.
