인프런 커뮤니티 질문&답변
작성한 질문수
useCallback 과 React.memo 의 사용 기준
작성
·
670
0
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨
질문 하시기 전에 꼭 확인해주세요
- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)
- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)
- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)
질문 하실때 꼭 확인하세요
- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)
- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)
- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)
- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요
- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
초심자의 입장에서 사실 저러한 기능을 보면 그냥 처음에 만들때는 useCallback, React.memo 를 다 써보고 나중에 문제 생기면 그때 바꿔쓰면 되지 않나? 라는 생각이 듭니다.
마치 평소에는 const 로 다 만들고, 해보다가 let 으로 변경이 필요하다 싶으면 let 으로 바꾸는 것처럼요.
이걸 어떤 기준을 잡고 사용해야 할까요? 정확한 기준이 있는지도 궁금합니다. 렌더링 되는데 걸리는 시간이 몇 초 이상일시 변경한다거나 하는 기준이 있을까요?
답변 1
1
안녕하세요 이정환입니다.
엄청 좋은 질문 주셨네요 감사해요 🙇♂️🙇♂️🙇♂️
우선 useCallback 이나 useMemo, React.memo 와 같은 렌더링 최적화 기능에도 당연 비용이 있기 마련입니다. 따라서 어떤 상황에나 무조건 유익하다고 볼 수는 없습니다.
또 useCallback이나 useMemo 등으로 최적화 해 둔 함수나 컴포넌트는 잦은 수정이 발생하는 초기 및 중기 개발 단계에서는 오히려 구조의 변경을 어렵고 어지럽게 할 가능성이 있어 대부분 프로젝트를 전부 마무리 하고 나서 배포 직전 최후 단계에 수행하곤 합니다. 또는 특정 컴포넌트나 모듈이 이제 최종적으로 더 이상 수정되지 않을 것 같다면 그때 하곤 하죠
그러므로 저는 개인적으로 최적화를 적용하지 않고 원하는 기능을 동작시키도록 먼저 개발한 다음 최종적으로 최적화를 적용하며 코드를 부분적으로 리팩토링 하는 방식을 권장드립니다.
혹시나 도움이 되실 까봐 제가 감명깊게 읽었던 좋은 아티클을 소개해드립니다. 함께 읽어보시면 정말 좋을 것 같아요
[ 아티클 : 언제 useMemo와 useCallback을 사용해야 할까? ]
원문 : https://kentcdodds.com/blog/usememo-and-usecallback
번역 : https://goongoguma.github.io/2021/04/26/When-to-useMemo-and-useCallback/
빠른 답변 및 좋은 참고 자료 링크 주신점 감사합니다 :)