안녕하세요. 이번 포스팅에서는 실무에서 겪었던 렌더링 성능 이슈와 어떠한 과정을 거쳐서 해결했는지 공유해보도록 하겠습니다.Issue문제가 된 이슈에 대해 간략히 설명해보겠습니다. 여러 개의 text를 선택해 tts 요청을 보내고 response가 왔을때 성공했다는 UI를 그리게 위해 state를 업데이트하는 상황입니다. 그러나 여러 개의 text를 가지고 있는 컴포넌트들의 숫자가 굉장히 많아질 경우 리렌더링이 여러번 발생하기 때문에 토스트를 띄운다거나 할때 토스트 애니메이션이 버벅이는 jank 현상이 있었습니다.Chrome devtools performance tab먼저 큰 그림에서 어떤 부분이 문제인지를 파악하기 위해 chrome devtools에서 performance tab을 활용했습니다.아래 이미..
