CSS-in-JS

CSS-in-JS는 기존의 전통적인 CSS 파일에서 벗어나, JavaScript 코드 내에서 스타일을 정의하고 관리하는 접근 방식을 사용한다.

JavaScript 코드 내에서 스타일을 정의하고 관리하는 패러다임을 제공하며, 일반적으로 JavaScript의 객체 또는 함수 형태로 스타일을 작성하고 이를 컴포넌트에 적용함으로써 스타일을 동적으로 변경하고 관리할 수 있다.

장점

1. 컴포넌트 단위 스타일링: CSS-in-JS는 컴포넌트 단위로 스타일을 관리하기 때문에 스타일 간의 충돌을 방지하고, 컴포넌트의 재사용성을 높일 수 있다.

2. 동적 스타일링: JavaScript의 변수나 조건문 등을 활용하여 스타일을 동적으로 변경할 수 있다.

3. 스타일 재사용: JavaScript의 변수나 함수를 사용하여 스타일을 정의하고, 여러 컴포넌트에서 재사용할 수 있다.

4. 스타일 관련 기능 활용: JavaScript의 기능을 활용하여 스타일 관련 기능을 편리하게 구현할 수 있다. 예를 들어, 조건부 스타일링, 반응형 스타일링 등을 쉽게 구현할 수 있다.

단점

1. 학습 곡선: CSS-in-JS를 처음 사용하는 개발자에게는 학습 곡선이 존재할 수 있다. 특히 기존의 CSS에 익숙한 경우, JavaScript를 사용하여 스타일을 작성하는 것이 익숙하지 않을 수 있다.

2. 런타임 오버헤드: CSS-in-JS를 사용하면 스타일을 동적으로 생성하고 관리하기 때문에 런타임 오버헤드가 발생할 수 있다. 때문에 큰 규모의 애플리케이션에서는 성능 문제가 발생할 수 있다.

3. SEO 문제: 일부 검색 엔진은 JavaScript로 렌더링된 콘텐츠를 인덱싱하지 않을 수 있으므로, CSS-in-JS를 사용할 경우 SEO에 영향을 줄 수 있다. 이러한 문제를 해결하기 위해 서버 사이드 렌더링이나 정적 사이트 생성 기술을 사용해야 할 수 있다.
   
   

대표적인 라이브러리

styled-components

가장 대표적인 CSS-in-JS 관련 라이브러리로, 손쉬운 유지보수가 가능하고, 스타일 컴포넌트에 고유한 클래스네임을 적용해 스타일 충돌의 발생을 방지한다.

사용 예시

import React from 'react';
// styled-components 를 사용하기 위해선 import 가 필요
import styled from 'styled-components'; 

// Styled-components를 사용하여 버튼 컴포넌트 스타일링
const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  font-size: 16px;
  padding: 10px 20px;
  border: 2px solid blue;
  border-radius: 5px;
  cursor: pointer;
`;

// 버튼 컴포넌트
const MyButton = ({ primary, onClick, children }) => (
  <Button primary={primary} onClick={onClick}>
    {children}
  </Button>
);

// 사용 예시
const App = () => (
  <div>
    <MyButton onClick={() => console.log('Button clicked')}>Default Button</MyButton>
    <MyButton primary onClick={() => console.log('Primary button clicked')}>Primary Button</MyButton>
  </div>
);

export default App;

Emotion

styled-components 와 유사하게 동작하지만, React 에 최적화되어 있어 일부 상황에서는 더 빠른 렌더링을 제공하고, 비교적 더 많은 유연성을 제공하며, 번들 크기가 더 작다는 장점이 있다.

사용 예시

import React from 'react';
// Emotion 을 사용하기 위해선 import 가 필요
import styled from '@emotion/styled';

// Emotion을 사용하여 버튼 컴포넌트 스타일링
const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  font-size: 16px;
  padding: 10px 20px;
  border: 2px solid blue;
  border-radius: 5px;
  cursor: pointer;
`;

// 버튼 컴포넌트
const MyButton = ({ primary, onClick, children }) => (
  <Button primary={primary} onClick={onClick}>
    {children}
  </Button>
);

// 사용 예시
const App = () => (
  <div>
    <MyButton onClick={() => console.log('Button clicked')}>Default Button</MyButton>
    <MyButton primary onClick={() => console.log('Primary button clicked')}>Primary Button</MyButton>
  </div>
);

export default App;