동적인 인라인 스타일의 단점

Hyeok·2025년 2월 13일

동적인 인라인 스타일 사용은 여러 가지 이유로 권장되지 않는다.

  1. Specificity: 인라인 스타일은 CSS의 다른 모든 형태에 비해 우선순위가 높다. 이로 인해 CSS 규칙의 우선 순위가 깨질 수 있으며, 이를 해결하려면 '!important' 키워드를 사용해야 할 수도 있다.
  2. Reuse and Organization: 인라인 스타일은 재사용이 어렵다. CSS를 별도의 파일 또는 스타일 컴포넌트로 분리하면 여러 컴포넌트에서 동일한 스타일을 쉽게 재사용할 수 있다.
  3. Performance: 인라인 스타일은 매번 새로운 객체를 생성하므로, 컴포넌트가 리렌더링 될 때마다 메모리 사용량이 증가하고 렌더링 성능에 부담을 줄 수 있다.

따라서, 동적으로 변경되어야 하는 스타일이 있는 경우 CSS 클래스를 동적으로 토글하거나, CSS-in-JS 라이브러리 (Styled-components, Emotion 등)를 사용하는 것이 더 좋은 선택일 수 있다.

profile
공부하면서 정리한 블로그입니다. 혹시 잘못된 내용이 있다면 댓글로 알려주시면 큰 도움이 됩니다. 감사합니다!

0개의 댓글