Emotion을 활용한 스타일 재활용에 대한 생각

서론

프론트엔드 개발에서 CSS-in-JS 라이브러리는 점점 더 널리 사용되고 있습니다. 그중 Emotion은 유연성과 강력한 기능 덕분에 많은 개발자가 선호하는 도구입니다. 특히 Emotion에서 제공하는 템플릿 문자열과 스타일 재활용 기능은 유지보수를 용이하게 하고 생산성을 높이는 데 중요한 역할을 합니다. 하지만 스타일 컴포넌트를 사용할 때 발생할 수 있는 단점도 고려해야 합니다. 이번 포스팅에서는 Emotion을 활용한 스타일 재활용 방법을 일반적인 방식과 비교하며 템플릿 문자열 활용의 장점과 한계를 알아보겠습니다.

 

템플릿 문자열 활용

Emotion은 스타일을 정의할 때 JavaScript 템플릿 리터럴을 사용합니다. 이 템플릿 리터럴의 특징을 활용해 스타일 재활용을 간단하고 직관적으로 구현할 수 있습니다.

템플릿 문자열로 스타일 확장

Emotion에서는 템플릿 문자열(${})을 통해 기존 스타일을 재활용하거나 확장할 수 있습니다.

즉, 코드의 수가 줄어들며, 재활용성과 확장성, 유지보수성이 늘어납니다.

 

아래의 예시에서는

• 재활용성: baseBoxStyle를 어디에서나 재사용 가능.
• 확장성: 특정 컴포넌트마다 다른 스타일을 쉽게 추가 가능.
• 유지보수성: 스타일 변경 시 baseBoxStyle만 수정하면 이를 참조하는 모든 스타일이 업데이트됨.

const baseBoxStyle = css`
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
`;

const headerStyle = css`
  ${baseBoxStyle}; /* 기존 스타일 재활용 */
  background-color: #001f5c;
  color: white;
`;

const footerStyle = css`
  ${baseBoxStyle}; /* 기존 스타일 재활용 */
  background-color: #f5f5f5;
  color: #333;
`;

 

 

 

3. 일반적인 방식과 템플릿 문자열 활용 비교

 

 

4. Emotion 템플릿 문자열 방식의 특별한 점

(1) 컴포넌트 스코프에 국한된 스타일링

Emotion은 스타일이 컴포넌트 스코프 내에서만 적용되기 때문에, 다른 컴포넌트와 클래스 이름 충돌이 일어나지 않습니다. 이는 대규모 프로젝트에서 발생할 수 있는 스타일 충돌 문제를 효과적으로 해결합니다.

 

Emotion의 클래스 이름 생성 방식

 

Emotion은 작성된 스타일을 기반으로 해시 값을 생성하여 고유한 클래스 이름을 만듭니다. 예를 들어, 아래 코드의 스타일 정의는 고유한 해시를 생성합니다.

 

좀 더 자세히 비유하자면 JavaScript의 const는 상수를 선언하는 방식으로, 같은 스코프 안에서는 상수명이 중복될 수 없기 때문에 Emotion에서도 스타일 정의가 자연스럽게 고유성을 갖게 되는 구조입니다. 그리고 Emotion은 JavaScript로 정의된 스타일을 기반으로 고유한 클래스 이름을 자동으로 생성하므로, 충돌 없이 안전하게 스타일을 관리할 수 있는 겁니다.

 

왜 Emotion 스타일은 고유성을 보장할까?

 

1. JavaScript 변수의 고유성

• JavaScript에서는 동일한 스코프에서 두 개의 const 변수를 같은 이름으로 선언할 수 없습니다.

 

const buttonStyle = css`
  color: blue;
`;

const buttonStyle = css`
  color: red;
`; // Error: Identifier 'buttonStyle' has already been declared

따라서 Emotion 스타일도 변수명 충돌이 원천적으로 방지됩니다.

 

2. Emotion의 클래스 이름 생성 원리

 

Emotion은 스타일을 정의할 때, 해당 스타일의 내용을 기반으로 고유한 해시 값을 생성하여 클래스 이름으로 사용합니다.

 

아래 처럼 css-1a2b3c4와 같은 고유의 해쉬 클래스 이름을 부여합니다

const buttonStyle = css`
  color: blue;
`;


<div class="css-1a2b3c4">Button</div>

 

만약 완전히 같은 스타일이 다른 컴포넌트에 사용되면?

같은 스타일 정의(color: blue;)가 다른 컴포넌트에서 사용되더라도 동일한 클래스 이름이 생성되므로, 중복 스타일 정의를 방지합니다.

(2) 동적 스타일링 가능

Emotion은 React의 상태(state)나 props를 기반으로 스타일을 동적으로 생성할 수 있습니다. 일반적인 CSS로는 동적 스타일링이 어렵거나 JavaScript DOM 조작이 필요합니다.

const dynamicStyle = (isActive) => css`
  background-color: ${isActive ? 'blue' : 'gray'};
  color: white;
`;

const MyComponent = ({ isActive }) => (
  <div css={dynamicStyle(isActive)}>Dynamic Style Example</div>
);

 

 

5. Emotion 스타일 컴포넌트의 단점

Emotion은 강력한 도구지만, 다음과 같은 단점도 존재합니다:

1. 런타임 성능 문제
   • Emotion은 스타일을 런타임에 생성하므로, 대규모 프로젝트에서 성능 문제가 발생할 수 있습니다. 특히, 스타일이 동적으로 자주 변경되는 경우 문제가 심화될 수 있습니다.
2. 전역 스타일 관리 어려움
   • Emotion은 컴포넌트 단위의 스타일 관리에 강점을 가지지만, 프로젝트 전체에 걸친 전역 스타일을 관리하는 데는 제한적일 수 있습니다.
3. 코드 복잡성 증가
   • 템플릿 리터럴을 사용하여 동적 스타일을 정의하면, 코드 가독성이 떨어질 수 있습니다. 특히, 복잡한 조건부 스타일이 많아지면 유지보수가 어려워질 수 있습니다.
4. CSS 클래스 네임 디버깅 어려움
   • Emotion은 고유한 클래스 이름을 자동 생성하지만, 브라우저에서 디버깅할 때 직관적이지 않을 수 있습니다. (ex: css-1xyzabc)

6. 템플릿 문자열 활용이 일반적인 관점인가?

Emotion에서 템플릿 문자열을 활용한 스타일 재활용은 일반적인 관점으로 볼 수 있습니다.

1. CSS-in-JS 표준에 부합
   • CSS와 JavaScript를 결합하여 관리하기 때문에 재사용과 유지보수가 용이합니다.
2. 간단하고 직관적인 문법
   • 별도의 문법 학습 없이 JavaScript 템플릿 리터럴로 스타일을 확장할 수 있습니다.
3. 프로덕션 코드에서 널리 사용됨
   • 많은 프로젝트에서 Emotion 템플릿 리터럴을 활용해 스타일을 정의하고 있으며, 이는 코드베이스를 정돈된 상태로 유지하는 데 도움을 줍니다.

하지만, 위에서 언급한 단점들을 염두에 두고 사용해야 합니다. 특히, 프로젝트 규모가 커지거나 전역 스타일 관리가 필요한 경우에는 Emotion을 보조적인 도구로 사용하는 것이 더 적합할 수 있습니다.

 

7. 결론

Emotion에서 템플릿 문자열을 활용해 스타일을 재활용하는 방법은 일반적인 방식과 비교해 간단하고 효율적입니다.

 

이는 유지보수를 단순화하고, 코드의 가독성을 높이며, 스타일 관리의 유연성을 제공합니다.

 

그러나 Emotion 스타일 컴포넌트의 단점(런타임 성능 문제, 전역 스타일 관리 어려움 등)을 고려하여 프로젝트에 적합한 도구로 선택해야 합니다.