이 글을 쓰게 된 이유
코딩을 하면서 useState와 useEffect는 많이 사용을 하게 되면서 꽤나 익숙해져 어느정도의 이해도가 있지만 렌더링에 대한 최적화와 메모리에 대한 이해도가 있지 않아 더욱 효율적인 코딩을 하기 위해 작성하게 됨.
컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있다. 그러나 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다.
React Hook은 함수 컴포넌트가 상태를 조작 및 최적화 기능을 사용할 수 있게끔 하는 메소드이다. 그 중 렌더링 최적화를 위한 Hookㅇ도 존재하는데, useCallback, useMemo가 그 역할을 하는 Hook이다.
useMemo란?
- 특정 값(value)을 재사용하고자 할 때 사용하는 Hook
- Memoization의 개념을 가진 Hook으로 생각하면 됨.(추 후 블로깅 예정)
기본 형태
const memo = useMemo(() => {
//내용
}, [의존성 배열])예시
const hardCalculator = (number) => {
for(let i =0; i < 99999999; i++){
return i
}
return number + 100
};
const easyCalculator = (number) => {
number + 100
};
function App(){
const [number, setNumber] = useState(1);
const [easyNumber, setEasyNumber] = useState(1);
const hardSum = hardCalculator(number);
const easySum = easyCalculator(easyNumber);
return(
<div className='App'>
<h2>복잡한 계산</h2>
<input type='number' value={number} onChange={(e) => setNumber(e.target.value)} />
<span>{hardSum}</span>
<h2>쉬운 계산</h2>
<input type='number' value={easyNumber} onChange={(e) => setEasyNumber(e.target.value)} />
<span>{easySum}</span>
</div>
);
}복잡한 계산은 오래 걸리기 때문에 렌더링 될 때 앱에 부담을 주고, 따라서 렌더 되는 속도도 많이 늦춰진다.
쉬운계산은 단순한 연산이기 때문에 렌더 되는 속도는 빠르지만, React 특성에 따라 easySum 값이 바뀌어도
복잡한 계산 함수도 다시 렌더 되기 때문에 또다시 함수 호출을 하여 앱에 부담이 가게 된다.
따라서,
const hardCalculator = (number) => {
for(let i =0; i < 99999999; i++){
return i
}
return number + 100
};
const easyCalculator = (number) => {
number + 100
};
function App(){
const [hardNumber, setHardNumber] = useState(1);
const [easyNumber, setEasyNumber] = useState(1);
const hardSum = useMemo(() => hardCalculator(hardNumber), [hardNumber]);
const easySum = easyCalculator(easyNumber);
return(
<div className='App'>
<h2>복잡한 계산</h2>
<input type='number' value={hardNumber} onChange={(e) => setHardNumber(e.target.value)} />
<span>{hardSum}</span>
<h2>쉬운 계산</h2>
<input type='number' value={easyNumber} onChange={(e) => setEasyNumber(e.target.value)} />
<span>{easySum}</span>
</div>
);
}useMemo를 사용하여 hardCalculator는 hardNumber의 값이 변경 될 때만 호출이 되도록 설정해준다.
그렇게 되면 easyNumber의 값이 바뀌더라도 hardNumber는 다시 복잡한 연산을 하지 않고 메모리에 저장된 값을 그대로 가져와 앱에 부담없이 렌더될 수 있다.
어차피 hardCalulator 함수는 복잡한 연산식이기 때문에 hardNumber 값이 바뀌면 다시 복잡한 연산을 하겠지만, 이는 극단적인 예시인 걸 참고 바란다.
useCallback이란?
- useMemo와 마찬가지로 Memoization 기법을 이용한 Hook
- useMemo와 차이점은 useMemo는 '값'의 재사용을 위한 거라면 useCallback은 '함수'의 재사용을 위해 사용하는 Hook
기본 형태
const callback = useCallback(() => {
// 내용
}, [의존성 배열]);useCallback은 함수의 재생성을 막는 역할을 중점적으로 보면 되겠다.
하잇