웹 컴포넌트를 개발하면서 스타일링은 중요한 부분이다. 컴포넌트 내부에서 스타일을 관리하는 방법을 알아보자.

내부 스타일 시트

가장 간단한 방법은 컴포넌트 내부에 <style> 태그를 사용하는 것이다. 이 방식은 컴포넌트 외부에서 스타일이 적용되지 않으며, 컴포넌트 내부에서만 유효하다.

<template>
  <style>
    .component {
      color: blue;
      font-size: 16px;
    }
  </style>
  <div class="component">
    내부 스타일링으로 스타일을 적용한 컴포넌트입니다.
  </div>
</template>

이 방식은 컴포넌트의 스타일을 관리하기 편하며, 다른 컴포넌트와 겹치지 않는 스타일을 적용할 수 있다. 하지만 스타일이 컴포넌트의 내부에 종속되어 있기 때문에 재사용성이 좋지 않을 수 있다.

외부 스타일 시트

컴포넌트의 스타일을 외부에서 관리하고 싶다면 외부 스타일 시트를 사용할 수 있다. 이를 위해 shadow DOM을 사용하면 컴포넌트 내부의 스타일만 유효하게 할 수 있다.

1. 컴포넌트의 외부 스타일 시트 파일을 생성한다. (예: component.css)

.component {
  color: blue;
  font-size: 16px;
}

1. 컴포넌트의 JavaScript 파일에서 shadowRoot를 생성하고 외부 스타일 시트 파일을 링크한다.

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <link rel="stylesheet" href="./component.css">
      <div class="component">
        외부 스타일링으로 스타일을 적용한 컴포넌트입니다.
      </div>
    `;
  }
}

이 방식은 컴포넌트의 스타일을 외부에서 관리하므로 여러 컴포넌트에서 동일한 스타일을 공유하거나, 스타일을 쉽게 변경할 수 있다는 장점이 있다.

CSS-in-JS

CSS-in-JS는 JavaScript를 사용하여 스타일을 작성하는 방식이다. 여러 라이브러리가 존재하며, 가장 인기있는 라이브러리 중 하나는 styled-components이다.

import styled from 'styled-components';

const StyledComponent = styled.div`
  color: blue;
  font-size: 16px;
`;

// 사용 예
<StyledComponent>
  CSS-in-JS로 스타일을 적용한 컴포넌트입니다.
</StyledComponent>

CSS-in-JS를 사용하면 스타일과 컴포넌트를 함께 작성할 수 있으며, 동적인 스타일링을 쉽게 처리할 수 있다는 장점이 있다.

결론

웹 컴포넌트를 개발할 때 스타일 관리는 중요한 고려사항이다. 내부 스타일 시트, 외부 스타일 시트, CSS-in-JS 등 각각의 방법을 적절히 사용하여 컴포넌트의 스타일링을 효율적으로 관리할 수 있다.

참고자료

• 웹 컴포넌트 개발 가이드
• Styled Components 공식 문서