useMemo(value = 값)

developer.do·2023년 2월 2일
0

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();
  }, []);

이렇게 되면 처음만 조금 느리지, 앞으로는 최적화가 됨

0개의 댓글