스타일 구성 요소 + 스타일 시스템 = 슈퍼 파워 파트 I

이것은 재사용 가능하고 효율적인 구성 요소를 만들기 위해 styled-components 및 styled-system의 힘을 어떻게 활용할 수 있는지 보여줄 여러 부분으로 구성된 기사 시리즈입니다. 우리는 Frontend의 ​​구성 요소 시대에 있습니다. 구성 요소를 레고와 연관시킬 수 있습니다. 레고와 마찬가지로 우리는 더 큰 구성 요소를 만들기 위해 부착할 수 있는 재사용 가능한 작은 구성 요소를 가질 수 있으며 다른 구성 요소와 추가로 결합하여 놀라운 것을 만들 수 있습니다. 처음에는 styled-component부터 시작하겠습니다.

styled-components 패키지를 프로젝트에 추가하십시오.

실 추가 스타일 구성 요소
styled-components는 태그가 있는 템플릿 리터럴을 활용하여 구성 요소의 스타일을 지정합니다. 더 나은 이해를 위해 간단한 텍스트 구성 요소를 만들어 봅시다.

import styled from 'styled-components';

const Text = styled.p`
  color: orange;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.5px;
`;

위의 예에서는 HTML DOM에서 기존 p 태그를 확장하고 있습니다. 그리고 더 많은 스타일을 제공합니다. 여기서 스타일이 지정된 구성 요소()가 무엇을 의미하는지 모르는 사용자를 위해. 템플릿 리터럴이라고 합니다. 스타일이 지정된 구성 요소로 태그 또는 구성 요소를 확장할 때마다 React 구성 요소를 반환합니다. 이 React 구성 요소는 일반 구성 요소와 완전히 동일하며 동일하게 작동합니다. 자세한 내용을 이해하기 위해 버튼 구성 요소를 만들어 보겠습니다.

const Button = styled.button`
  background: orange;
  color: white;
  font-size: 15px;
  padding: 10px 30px;
  border: none;
  border-radius: 3px;
  font-weight: 500;
  margin: 20px;
`;

const App = () => props => <Button>Hello World</Button>

여기에서 styled-component로 재사용 가능한 구성 요소를 만드는 것이 얼마나 쉬운지 상상할 수 있습니다. 그러나 한 가지 문제가 있는 것 같습니다. React 구성 요소는 사용자 정의가 가능하며 소품을 전달하여 동작을 제어할 수 있습니다. 쉽게 사용자 정의할 수 없다면 styled-component가 얼마나 좋은 것입니까? 다음 단계에서는 이 구성 요소가 소품에 따라 수락하고 동작하도록 만드는 방법을 배웁니다.

소품 수락:
구성 요소가 소품을 허용하도록 만들기 전에 구성 요소를 정의하는 주요 스타일을 파악하는 것이 중요합니다. 버튼의 경우 이러한 스타일은 배경 및 텍스트 색상이 될 수 있습니다(고급 기능을 원할 경우 윤곽선, 단색 상태 가능).

Styled-components를 사용하면 구성 요소가 받는 prop 값에 액세스할 수 있습니다. 이를 통해 소품을 기반으로 키 스타일을 수정할 수 있습니다. 소품에 응답하고 버튼의 다양한 변형을 만들 수 있도록 버튼 구성 요소를 수정해 봅시다.

const Button = styled.button`
  background: ${props => (props.bg ? props.bg : "orange")}
  color: white;
  font-size: 15px;
  padding: 10px 30px;
  border: none;
  border-radius: 3px;
  font-weight: 500;
  margin: 20px;
`;

const App = () => (
 <div>
   <Button bg="#FF595E">Danger Button</Button>
   <Button>Default Button</Button>
 </div>
);

이제 버튼 컴포넌트의 배경을 하드코딩하지 않고 대신 bg라는 소품이 존재하는지 확인하는 함수를 전달했습니다. 그것이 존재한다면 우리는 그것을 배경으로 사용할 것이고 그렇지 않으면 우리는 기본 오렌지로 갈 것입니다. 이제 bg(배경) 소품을 받는 버튼 구성 요소가 있습니다. 유사하게 많은 구성 요소를 만들 수 있습니다. 백그라운드용으로 작성한 함수를 최적화하려면 다음과 같이 간단히 작성할 수 있습니다.
background: ${props => props.bg};이 구문의 유일한 문제는 이 구성 요소를 사용할 때마다 항상 bg prop을 전달해야 한다는 것입니다. 그렇지 않으면 배경이 설정되지 않습니다. 기본 소품을 사용하도록 수정하는 가장 쉬운 방법 중 하나입니다.
Button.defaultProps = { bg: 'orange' };이것은 항상 구성 요소에 기본 bg prop을 제공하므로 이 구성 요소를 사용할 때마다 bg prop을 전달하는 것에 대해 걱정할 필요가 없습니다. 이 예제는 꽤 기본적인 것 같습니다. 그러나 실제 프로젝트에서는 일부 구성 요소가 매우 복잡합니다. 많은 주요 스타일 요소를 수정할 수 있는 구성 요소의 예를 보여 드리겠습니다.

import React from "react";
import styled from "styled-components";

const CardWrapper = styled.div`
  background: ${props => props.bg};
  width: 350px;
  margin: auto;
  padding-bottom: 20px;
  border-radius: ${props => props.borderRadius}px;
`;

const Image = styled.img`
  width: 100%;
  height: auto;
  border-radius: ${props =>
    `${props.borderRadius}px ${props.borderRadius}px 0 0`};
`;

const Title = styled.h3`
  color: ${props => props.titleColor}
  margin: 0;
  padding: 15px;
`;

const Description = styled.p`
  color: ${props => props.textColor};
  padding: 0px 15px;
  margin: 0;
`;

const Card = ({
  image,
  title,
  description,
  titleColor,
  textColor,
  borderRadius,
  ...props
}) => (
  <CardWrapper borderRadius={borderRadius} {...props}>
    <Image src={image} borderRadius={borderRadius} alt={title} />
    <Title titleColor={titleColor}>{title}</Title>
    <Description textColor={textColor}>{description}</Description>
  </CardWrapper>
);

Card.defaultProps = {
  bg: "white",
  titleColor: "#1982c4",
  textColor: "#999",
  borderRadius: 5
};

const App = () => (
 <Card
  image="assets/react-image.png"
  title="Card Title"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing"
 />
);

이는 스타일이 지정된 여러 구성 요소를 사용하여 재사용 가능한 더 큰 구성 요소를 만드는 방법을 보여주는 예일 뿐입니다. 이 구성 요소에 많은 추가 기능을 추가하여 사용자 정의가 가능하도록 만들 수 있습니다. 다음 부분에서는 styled-component 내부의 모든 미니 함수 작성을 제거하고 더 좋고 빠르고 효율적인 방식으로 재사용 가능한 구성 요소를 만드는 방법을 공유하겠습니다. Part 2