실습 가이드: 16강 에서 useMemo의 역할은 무엇인가요?

Question

이 실습에서 말하는 것은 "상태 변경용(dispatch) 컴포넌트와 상태 사용용(state) 컴포넌트를 분리해서 불필요한 리렌더링을 줄이는 것"으로 받아들였는데요   그렇다면 이 코드에서 useMemo는 어떤 동작을 하며 역할은 무엇인가요?

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 이태관님. useMemo 는 컴포넌트에서 연산량이 많은 계산을 최적화하기 위해 사용하는 React Hook입니다. 사용된 값이 변경되지 않는 한, 이전에 계산한 결과를 재사용하여 불필요한 재계산을 방지합니다. 특히 상태 변경용(dispatch) 컴포넌트와 상태 사용용(state) 컴포넌트를 분리할 때, useMemo 를 사용하여 매번 동일한 연산을 할 필요가 없는 경우에 성능을 최적화할 수 있습니다. 이는 불필요한 리렌더링을 줄여 성능을 높이는 데 기여합니다. 예를 들어, 컴포넌트에서 복잡한 계산 결과를 useMemo 로 메모이제이션 함으로써, 의존 값이 변경될 때만 재계산하게 됩니다. 이렇게 하면 데이터가 변경되지 않으면 메모이제이션된 값을 그대로 사용하여, 불필요한 렌더링을 효과적으로 줄일 수 있습니다. 관련 예시와 자세한 설명을 원하시면 다음 강의의 내용을 참고해 보세요: 강의 내용: React 최적화 기법과 useMemo 활용 . 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.​​​​​​