useCallback과 useMemo만 쓰면 최적화가 될까요

안녕하세요, 오랜만에 인사드립니다! 최근에 좀 길게 휴가를 다녀오고 첫 글이네요 (처음부터 TMI! ㅋㅋㅋㅋ) React를 사용하면서 어느 정도 레벨이 올라가면 최적화라는 것을 신경쓰고 계실 것입니다. 요새 React를 배우신다면 hooks를 공부할 때 useCallback과 useMemo를 통해 최적화를 할 수 있다고 어느에선가 보셨을 겁니다. 두 함수는 각각 콜백(함수)와 값을 메모이제이션한다는 hook들입니다. 근데 여기서 드리고 싶은 질문은 정말 useCallback과 useMemo만 쓰면 최적화가 되는지 입니다. 정답은 그럴 수도 아닐 수도 있다! 오히려 마이너스일지도..? 정말 마음에 안드는 대답이시죠? ㅎㅎ 아래 첨부한 링크에선 useCallback과 useMemo를 적용했을 때와 적용하지 않았을 때 성능을 수치를 통해 비교하고 있습니다. 오히려 적용했을 때 느린 경우도 있는 것을 보실 수 있을 겁니다. 대부분의 경우에는 useCallback과 useMemo를 사용하지 않는 것이 좋습니다. 본문에서 가장 와닿는 말 중 하나는 '코드를 실행하는데는 비용이듭니다.'라는 말입니다. 최적화라는 명목 아래 useCallback와 useMemo의 비용은 생각하지도 않고 React가 잘 해주겠지라는 생각을 무의식 중에 가지고 있지 않으셨나요? (저만 그랬나요..ㅎㅎ) 링크의 본문에도 있지만 React에서 최적화는 하위 트리의 렌더링을 막는 것입니다. 단순히 콜백(함수)와 값을 메모이제이션하는 것은 성능 영향을 미치지 못하거나 오히려 악영향을 줄 수도 있습니다. React 팀이 의도한 useCallback과 useMemo를 용도를 파악하고 사용하신다면 여러분의 웹앱 성능을 한층 높히실 수 있으실 겁니다.

React Rendering Optimization

Velog

React Rendering Optimization

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2022년 12월 22일 오후 2:06

 • 

저장 30조회 2,333

댓글 0