리액트 성능을 최적화 하는 Hook들
useReducer
상태(state)를 더 복잡하게 다룰 때 사용되며 여러 상태에 대한 규칙을 만들어 한 번에 다룰 수 있다.
const [state, dispatch] = useReducer(reducer, initialArg, init?)
😀 예시 1)
상자 안에 공이 있다고 상상해보자. useReducer는 그 상자 안에 있는 공을 꺼내서 다양한 작업을 할 수 있게 도와준다. "공을 하나 증가시켜라" 또는 "공을 반으로 나눠라" 같은 일을 할 수 있다.
🧐 예시 2)
버튼을 누르면 숫자가 1씩 증가
import React, { useReducer } from 'react';
const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
default:
return state;
}
};
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
const increment = () => {
dispatch({ type: 'INCREMENT' });
};
return (
<div>
<p>Count: {state.count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}useCallback
함수를 특정한 곳에로 저장해서, 렌더링될 때마다 불필요하게 새로 만들어지지 않게 도와준다.
const cachedFn = useCallback(fn, dependencies)
😀 예시)
현관문을 열고 닫을 때마다 열쇠가 필요하다고 가정해보자. 매번 열쇠를 찾게 되면 시간이 많이 소요될 것이다. 열쇠를 항상 문 옆 바구니에 보관해두면 문을 열고 닫을 때마다 열쇠를 찾지 않아도 될 것이다. 이때 문을 열고 닫는 행위가 어떤 일을 하는 함수가 되고, useCallback은 열쇠를 보관한 특정한 공간이 된다.
🧐 예시 2)
버튼을 누르면 숫자가 1씩 증가
import React, { useCallback, useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}useMemo
계산된 값을 저장해두고, 값이 변하지 않는 한 계속해서 재사용할 수 있게 도와준다.
const cachedValue = useMemo(calculateValue, dependencies)
😀 예시 1)
과일가게에서 사과의 가격은 항상 동일하다고 가정하자. useMemo는 이미 계산된 가격을 기억하여, 사과를 구입할때마다 계산하지 않고 이전의 값으로 구입할 수 있도록 한다.
다만, 값이 변경되는 과일은 useMemo를 사용할 수 없음
🧐 예시 2)
계산 작업 최적화
import React, { useMemo, useState } from 'react';
function MathGame() {
const [number1, setNumber1] = useState(5);
const [number2, setNumber2] = useState(10);
const result = useMemo(() => {
console.log('Calculating result'); // 이 줄은 렌더링 시에만 실행됨
return number1 + number2;
}, [number1, number2]);
return (
<div>
<p>Number 1: {number1}</p>
<p>Number 2: {number2}</p>
<p>Result: {result}</p>
</div>
);
}[Hook]은 아니지만 같이 봐두고 가면 좋을
React.memo
컴포넌트를 메모이제이션하여, 속성(props)이 변경되지 않으면 이전 결과를 재사용한다.
😀 예시)
레고 블록으로 무언가를 만든다고 상상해보자. 레고 집을 만들어 놓으면, 같은 모양의 집이 필요할 때마다 이전에 만들어 둔 집을 재사용할 수 있다. 이때 React.memo는 레고 집을 만들었을때 사용되었던 도구라고 볼 수 있다.
다만, 다른 모양의 레고 집이 필요할때는 React.memo를 사용할 수 없음
useMemo vs React.memo
👀 적용 대상
useMemo
계산한 값
React.memo
컴포넌트
👀 적용 시기
useMemo
컴포넌트의 렌더링 과정에서 함수의 실행 결과를 최적화하고자 할 때 사용됨
React.memo
렌더링된 컴포넌트 자체를 최적화하고자 할 때 사용됨.
➡ 보통 두 가지를 함께 사용하여 컴포넌트 내부에서 계산한 값을 useMemo로 최적화하고, 컴포넌트 전체를 React.memo로 감싸서 props이 변경되지 않으면 전체 컴포넌트를 재사용하도록 할 수 있다.
