[React] styled-Components란?

 

 

styled-components란?

React 애플리케이션에서 사용되는 CSS-in-JS 라이브러리 중 하나입니다. 이 라이브러리는 JavaScript 파일 안에서 컴포넌트 스타일을 정의할 수 있게 해 주며, 동적인 스타일링 및 컴포넌트 기반의 스타일링을 쉽게 구현할 수 있도록 도와줍니다.

 

장점

1. 간단한 사용 방법

템플릿 리터럴 (template literals) 문법을 활용하여 스타일을 정의할 수 있습니다.

import styled from 'styled-components';

const Button = styled.button`
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
`;

 

2. 동적 스타일링

JavaScript 표현식을 사용하여 동적으로 스타일을 변경할 수 있습니다.

const dynamicColor = 'red';

const DynamicButton = styled.button`
  background-color: ${dynamicColor};
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
`;

 

3. 재사용 가능한 컴포넌트

styled-components로 스타일을 지정한 컴포넌트는 일반적인 React 컴포넌트처럼 사용할 수 있습니다.

const App = () => {
  return (
    <div>
      <Button>Click me</Button>
      <DynamicButton>Dynamic Button</DynamicButton>
    </div>
  );
};

 

4. 글로벌 스타일 및 테마 지원

글로벌 스타일 및 테마를 지원해주는 메서드를 이용해 쉽게 적용할 수 있습니다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
  }
`;

const App = () => {
  return (
    <>
      <GlobalStyle>
      {/* ...Components */}
      </GlobalStyle>
    </>
  );
};

 

5. 테스트 가능

Jest와 함께 jest-styled-components 라이브러리를 사용하여 styled-components로 작성된 스타일을 쉽게 테스트할 수 있습니다. 테스트를 작성할 때는 해당 컴포넌트가 예상대로 스타일이 적용되고 렌더링 되는지 확인하는 것이 일반적입니다.

// Button.js
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'green')};
  color: white;
`;

export default Button;

// Button.test.js
import React from 'react';
import { render } from '@testing-library/react';
import Button from './Button';

test('Button renders correctly', () => {
  const { container } = render(<Button />);
  expect(container.firstChild).toMatchSnapshot();
});

test('Button with primary prop renders correctly', () => {
  const { container } = render(<Button primary />);
  expect(container.firstChild).toMatchSnapshot();
});

 

Jest의 toMatchSnapshot 함수를 사용하여 스타일이 변경되었을 때 확인하는 테스트와 primary prop을 전달하여 동적으로 스타일이 변경되는 경우에 대한 테스트를 수행하였는데 잘 동작되는 걸 보실 수 있습니다.

 

6. as 속성을 이용하여 태그 변경 가능

위의 코드에서 MyLink는 MyButton을 상속하면서 as 속성을 사용하여 생성되는 요소를 <a>로 변경합니다. 이렇게 하면 <a> 태그로 렌더링되면서 스타일은 MyButton의 스타일을 그대로 유지합니다.

import styled from 'styled-components';

const MyButton = styled.button`
  background-color: lightblue;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
`;

const MyLink = styled(MyButton).attrs(() => ({ as: 'a' }))`
  text-decoration: none;
`;

// 사용 예시
<MyLink href="https://itprogramming119.tistory.com">Visit 코딩병원</MyLink>

 

 

[단점]

1. 런타임 오버헤드

styled-components는 런타임에 스타일을 생성하므로, 초기 렌더링 성능이 다른 방법에 비해 약간 느릴 수 있습니다. 이러한 오버헤드는 보통 미미하지만, 퍼포먼스가 중요한 상황에서는 고려해야 합니다.

 

2. 추가적인 의존성

styled-components를 사용하면 프로젝트에 추가적인 의존성이 생깁니다. 이는 번들 크기를 늘릴 수 있고, 특정 프로젝트에서는 이를 고려해야 할 수 있습니다.

 

styled-components의 단점은 위에 소개해드린 내용보다 더 있지만, 단점들을 고려하더라도 다양한 프로젝트에서 성공적으로 사용되고 있으며, 많은 개발자에게 매력적인 선택지 중 하나입니다. 그러니 프로젝트의 특성에 따라 사용하시면 될 것 같습니다.

 

 

 

References

https://styled-components.com/

https://github.com/styled-components/jest-styled-components