<aside> <img src="/icons/crayon_orange.svg" alt="/icons/crayon_orange.svg" width="40px" />

분업 과정에서 컴포넌트가 겹치는 이슈를 예방하고, 비동기적으로 개선사항을 나누기 위해 작성하는 문서

규칙

• 새로운 컴포넌트를 최적화/리팩토링하기 전, 해당 문서를 확인해 내가 건드리려는 컴포넌트를 누군가 이미 작업 중인지 확인해야 합니다.
• 자신이 새로운 컴포넌트 수정을 시작했다면, 이 문서에 반드시 남깁니다.
• 기타 개선 사항이나 의견은 자유롭게 남겨주세요. 비동기적으로 확인할 수 있게 해주세요!
• 개선 사항은 아주 간단하고 이상하게라도 좋으니 부담 없이 하단에 기록
• 오늘(12/4) 오후 5시 반까지 PR 올리고, 충돌있을시 함께 1시간동안 해결

리팩토링/최적화 방향

• 스타일 아래로 내리기
• 파일명은 github 이슈가 생길 수 있으므로, 5시 반 병합 시간에서 시간이 남을 때 다함께 진행
• 불필요한 리렌더링 확인
• useCallback, useMemo, React.memo </aside>

J145_신유진

신유진 ⇒ Player 폴더에 있는 컴포넌트들 먼저 확인해보려고 합니다, contentShareView

Player

첫 프로파일링 결과

requestFrameAnimation으로 인해 잦은 리렌더링이 발생하지만 일반적으로 오래걸리진 않는 것으로 보였다. 그러나 5ms 이상만 보이도록 설정한 결과 종종 8ms~11ms정도 걸리는 경우가 존재하는 걸 확인했다.

원인이 무엇일지 확인해본 결과,

Slider가 높은 비중을 차지한다는 것을 확인할 수 있었다.

Slider가 오래걸리는 원인은 뭘까?

• 콜백 함수가 많이 포함되는 게 원인일까 싶어 useCallback으로 감싸보았으나 효과는 미비하였음.

• 자주 변하는데 스타일이 css prop으로 제공되는 게 문제일까 싶어서 동적인 스타일들은 css ⇒ inline style로 변경

  

  

  • 결과적으로 5ms 이상 막대 18개 중, 2개(드래그를 시작할 때로 추정)가 3ms정도 걸리는 걸 제외하고, 나머지 막대에선 슬라이더가 포함되는 비중이 많이 줄었다.

불필요한 자식 컴포넌트의 리렌더링 막기

Player의 fraction 상태는 requestAnimationFrame에 의해 매우 자주 변한다. 그러므로 Player 컴포넌트도 매우 자주 리렌더링되는데, 해당 상태와 무관한데도 자식 컴포넌트들까지 리렌더링되는 경우가 발생했다.