Styled-components를 활용한 React 스타일링 블로그 제목: React 스타일링의 혁신, Styled-components를 활용한 강력한 CSS in JS 기법 마스터하기

Styled-components란?

Styled-components는 React 및 React Native에서 CSS-in-JS 스타일링 툴 중 하나입니다. 자바스크립트 파일 내 자동완성, 린팅, CSS구문 하이라이티등 편리한 개발 환경을 제공합니다.

또한, 스타일링을 할 때 기존 CSS와 다르게 적용되는 스타일이 컴포넌트 별로 나눠지기 때문에 CSS 네임스페이스 이슈를 해결하고, 파일 분리를 최소화하여 효율적인 관리를 돕습니다.

최종적으로 스타일 코드는 빌드 타임에서 스타일 코드만 별도의 CSS 파일로 추출되기 때문에 사용자입장에서는 일반적인 CSS 파일을 다운로드 받는 것과 같은 성능을 보장합니다.

프로젝트 가독성과 유지보수성을 증대하여 웹 개발을 수월하게 해주기 때문에 많은 개발자들이 선호하는 라이브러리 중 하나입니다.

Styled-components 사용 예제

React에서 styled-components를 사용하면서 가장 좋은 측면 중 하나는 스타일들을 styled 객체를 통해 컴포넌트로 캡슐화 할 수 있다는 것입니다.

제품 이름과 그 설명을 보여주는 간단한 컴포넌트를 생성해봅시다.

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Subtitle = styled.h2`
  text-align: center;
  color: papayawhip;
`;

const Product = ({ name, description }) => (
  <div>
    <Title>{name}</Title>
    <Subtitle>{description}</Subtitle>
  </div>
);

export default Product;

실무 꿀팁과 예제

프롭스(props)에 따라 스타일을 동적으로 변경하는 것이 지원돼서 코드 재사용성을 높일 수 있습니다. 예를 들어 버튼 컴포넌트에서 primary라는 props를 전달하면 버튼의 배경색과 글자색을 자유롭게 바꿀 수 있습니다.

import styled from 'styled-components';

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

export default Button;

응용버전 예시

styled-components는 테마 제공 기능이 있어, 중복되는 스타일 코드 작성을 최소화하고, 앱 전반에 걸친 디자인 일관성을 유지할 수 있습니다.

import styled, { ThemeProvider } from 'styled-components';

const theme = {
  primaryColor: 'palevioletred',
  secondaryColor: 'papayawhip'
};

const Title = styled.h1`
  color: ${props => props.theme.primaryColor};
`;

const Subtitle = styled.h2`
  color: ${props => props.theme.secondaryColor};
`;

const ThemedComponent = () => (
  <ThemeProvider theme={theme}>
    <Title>I'm a title</Title>
    <Subtitle>I'm a subtitle</Subtitle>
  </ThemeProvider>
);

export default ThemedComponent;

이렇게 styled-components는 실무에서도 다양하게 활용될 수 있습니다. 이외에도 상속, 애니메이션, 전역 스타일 선언 등 여러 기능을 제공하니, 자세한 내용은 스타일드 컴포넌트의 공식 문서를 참조해주세요.

Styled-components란?

Styled-components 사용 예제

실무 꿀팁과 예제

응용버전 예시

Enjoy Reading This Article?