css-in-js (1) 썸네일형 리스트형 styled-components의 동작 원리와 주의사항 styled-component의 동작 원리와 주의사항을 알아봅니다. 본문에선 언급하지 않았으나, 실제로 styled-components는 useMemo, useCallback과 같은 도구를 이용하여 자체적인 최적화를 많이 수행하고 있습니다. 따라서 불필요한 css 재평가 부하에 대해선 걱정할 필요가 없습니다. 1. styled-components가 CSS를 생성 및 주입하는 방법 styled-components는 css를 lazy 하게 생성 및 삽입함 컴포넌트 렌더링 전까지 탬플릿 리터럴, 혹은 객체로 전달된 css 규칙을 평가하지도 않고, cssom에 반영하지 않음 렌더링하는 css에 대해서만 css 평가 비용을 지불 (비교 - 사전 컴파일 tailwind) js는 defer를 사용하여 다운로드, 처리.. 이전 1 다음
