const value = useMemo(()=>{
return 반환할 함수()
},[])
const heavyWork = () => {
for (let i = 0; i < 100000; i++) {} // 여기 식은 아무런 상관이 없음
return 100; // 무조건 100이 리턴이 됨
};
const value = heavyWork();
굳이 저 for 부분은 컴포넌트가 재 랜더링 필요가 될 필요는 없음
그럴 때 바로 useMemo를 사용한다.
useMemo 설정법,
useMemo(() => {
heavyWork();
}, []);
const value = heavyWork();
-> const value = useMemo(() => {
heavyWork();
}, []);
이렇게 되면 처음만 조금 느리지, 앞으로는 최적화가 됨