코딩을 하면서 useState와 useEffect는 많이 사용을 하게 되면서 꽤나 익숙해져 어느정도의 이해도가 있지만 렌더링에 대한 최적화와 메모리에 대한 이해도가 있지 않아 더욱 효율적인 코딩을 하기 위해 작성하게 됨.
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는 다시 복잡한 연산을 하지 않고 메모리에 저장된 값을 그대로 가져와 앱에 부담없이 렌더될 수 있다.
const callback = useCallback(() => {
// 내용
}, [의존성 배열]);