스낵바 성능 개선하기 - 문제 인식

백신 중앙 정보원 프로젝트에서는 원래 스낵바 구현을 직접 하지 않고 notistack 라이브러리를 통해 스낵바를 적용했었다. 그런데 아무래도 내 프로젝트에 완전히 커스텀하기 어려웠기 때문에, 스낵바 컴포넌트 + 리덕스 + 커스텀 훅을 통해 내 프로젝트에 완전히 커스텀 된 스낵바 컴포넌트를 만들었고, 이어서 snack-snack 라이브러리도 출시했다.

그런데 최근 프로젝트에 적용한 스낵바에 성능적 문제가 있다는 걸 깨달았다 🥲. 

 

내가 발견한 문제는 다음과 같다.

 

1. 스낵바가 열릴 때 한번, 닫힐 때 한번 전체 페이지가 리렌더링 된다.

2. 스낵바가 열리고 닫힐 때, 간헐적으로 깜박이며 다시 모습을 나타낸다.

 

여기서 주목할 점은 열릴 때, 닫힐 때 이렇게 두 번 리렌더링이 발생한다는 점, 그리고 스낵바 컴포넌트가 아닌 전체 페이지가 리렌더링 된다는 점이다. 

 

그리고 추가로 아래처럼 가끔씩 스낵바가 닫히는 척 하면서 다시 모습을 나타낸다....ㅎ...

 

 

페이지가 언제 리렌더링 되는지는 React Developer Tools를 통해 확인했다. 위의 영상을 보면 스낵바가 열릴 때마다 전체 페이지에 청록색으로 네모가 쳐지면서 깜빡하는 걸 볼 수 있는데, 이게 페이지가 리렌더링 되고 있다는 것이다.

 

정확한 비교를 위해 접종 현황 부분을 클릭할 때마다 스낵바가 뜨도록 했다. 코드 상으로는 메인 페이지 하위 컴포넌트인  접종 현황 컴포넌트에서 스낵바가 열리는 로직이 있는데, 지금 전체 페이지가 리렌더링 되는 모습을 볼 수 있다. 이를 DOM 구조로 아주 간략히 나타내 보면 다음과 같다.

 

 

React.Portal을 써서 다른 부모 노드에 변경 사항이 가해졌는데(snackbar 쪽), 왜! App 컴포넌트 전체가 리렌더링 되냐구!!! 차차 개선해봐야겠다 😭😭😭😭

 

블로그 글이 늦어질지도 모른다.....ㅎㅎ..왜냐면....문제 해결을 완료해야 글을 쓸 수 있으니깐...