리렌더링 최적화 - 2편

안녕하세요~~👋👋

 

여러분 잘 지내고 계신가요? 이제 슬슬 봄이 다가오고 있어요..!!! 🎉

모두들 따뜻한 봄을 지내시길 바랄게요~

---

 

문제상황

저는 회사에서 경기 기록에 선수 정보를 추가/수정할 수 있는 기능을 맡게 되었어요!

이미 구현된 부분이 있었고, 해당 부분에 추가적인 기능을 넣는 상황이었어요.

 

하지만, 왜인지 모르게 경기 기록 수정 모달이 굉장히 늦게 띄워졌어요..!!! --> 문제 상황

 

아래 영상을 확인해보시면 아시겠지만, 2초정도 늦게 모달이 띄워졌어요!

개선 전

 

 

콘솔을 찍어보면서 원인을 찾아보기 시작했어요..!

 

개선 전 (콘솔)

(6번이 모달, 7번이 경기로그입니다.)

 

문제는 모달이 열릴 때와 닫힐 때, 모든 기록들이 찍히는 것을 확인할 수 있었어요..!!!

모든 기록들이 리렌더링이 되는 상황이었습니다!

 

결론부터 얘기하자면, props로 넘어가는 함수가 매번 연산/실행이 되는 문제가 있어서 
해당 함수에 useCallback을 적용했고, 
변함이 없는 경기 로그들에는 memo를 적용하여 문제를 해결했습니다.

 

 

구조)

모달(자식 컴포넌트 A)이 열리고 닫힐 때마다 자식 컴포넌트 B도 리렌더링이 되는 상황이었습니다.

문제는 경기 로그(자식 컴포넌트 B)가 많으면 많을수록 모달이 늦게 뜨는 것이었습니다.

 

부모 컴포넌트에서 경기 로그로 전달되는 props 중에 계속 변하는 항목이 있는지 확인을 했어요!

모달을 여는 함수를 props로 전달하는데, 이는 리렌더링이 될 때마다 새로운 함수를 생성하기 때문에
이를 useCallback 처리를 하였습니다.

 

그리고 변경되지 않는 경기 로그에 관해서는 memo처리를 하여 리렌더링이 더 이상 발생하지 않게 되었습니다!!!!

구조

 

 

개선 후 영상을 한 번 보시면 빠르게 모달이 열리는 것을 확인할 수 있어요!!

 

개선 후

 

콘솔도 같이 확인했을 때, 7. EditableLog(경기 로그)가 찍히지 않는 것을 확인할 수 있어요!

 

개선 후(콘솔)

 

 

지표도 같이 보아요!!!

 

개선 전에는 경기로그 리렌더링으로 인해, 약 2배의 시간이 걸렸었구요.

Scripting도 굉장히 많은 시간을 차지했어요!!

개선 전

 

개선 후

 

 

오늘도 회사 서비스의 기능을 하나 최적화했어요!!!
이 맛에 회사 다닙니당~☺️