[Nextjs]useMemo 를 이용하여 불필요한 리렌더링 문제 해결
Dev/Nextjs
·
2024. 10. 5.
1. 이슈1.1. 발생 환경 : Task App - Task, Label add, edit Dialog popup 으로 구성- 대부분의 경고메시지는 Toast 를 Layout 에 선언해 전역적으로 사용 중1.2. 발생 상황 Task Edit Dialog 에서 Submit 버튼을 클릭시 변경된 컨텐츠가 없어서 Toast 메세지를 띄우고 로직 중단되었는데 바닥Page 에서 rerendering 이 불필요하게 일어나는 상황1.3. 해결방안 useMemo 및 React.memo 를 활용하여 ToastProvider 최적화useMemo를 사용하여 ToastProvider에서 showToast 함수가 메모이제이션되도록 처리하면, ToastProvider 컴포넌트가 리렌더링될 때마다 새로운 함수가 생성되는 것을 방..