TR-5, Styled 컴포넌트 위치에 따른 성능 저하

오늘 한 작업

Clinet의 Styled 항목이 컴포넌트 함수 내에서 실행되고 있어서

re-render 될 때마다 console에 주의 message가 쌓였고,

그로 인해 브라우저 가로 너비를 줄였다 늘일때 버벅거리는 현상이 발생했다.

일단 내가 맡은 Component들의 Styled 항목들을 전부

Component 함수 외부로 옮겨서 성능을 개선시켰다.

팀원들과 공유 후 전부 수정해야 한다.

어려웠던 부분

페이지가 버벅거리는 현상이 내가 막무가내로 짠 코드 때문인가

useEffect를 잘못 쓴건가, 또는 addEventListner, wondow.innerWidth를 잘못

사용한 건가.. 또는 @media를 너무 날발했나?

코드를 다시 새로 짜야하나? 라는 생각에 걱정이 됐지만,

여러가지 시도와 서치 끝에 해결책을 찾았다.