Styled Component

• 참고자료-달서.스타일컴포넌트.블로그

패키지 설치

$ npm i styled-components

• 설치할 수 있다. 설치 후엔 package.json에서 확인할 수 있다.

기본 문법

먼저 위에서 설치한 styled-components패키지에서 styled함수를 임포트합니다.
styled는 Styled Components을 사용하려면 요놈을 써야한다.

기본 문법은 HTML 엘리먼트나 React 컴포넌트 중 어떤 것을 스타일링 하느냐에 따라 살짝 다르다.
그렇지만 나는 React 컴포넌트에 적용할 예정이므로 React 컴포넌트에 쓰는 법만 적어놔야지 ㅎ~

React 컴포넌트를 스타일링 할 때는 해당 컴포넌트를 임포트 후 인자로 해당 컴포넌트를 넘기면 된다.

import styled from "styled-components";
import Button from "./Button";

styled(Button)`
// <Button> React 컴포넌트에 스타일 정의
`;

이 문법은 ES6의 태그드 템플릿 리터럴을 사용해서 스타일을 정의합니다.
그리고 styled함수는 결국 해당 스타일이 적용된 리액트 컴포넌트를 리턴합니다.

import styled from 'styled-components';

styled.button`
	font-size: 1rem;
`;

이렇게 작성된 스타일드 컴포넌트로 작성된 자바스크립트 코드는 아래와 같습니다.

button {
	font-size: 1rem;
}

진짜 장점.

• 각 완전히 격리된 스타일을 적용할 수 있다.
• 항상 css 적용하면서 불편했던 점이 개선되었다. 호호

고정 스타일링

위에서 배운 Styled Components 문법을 이용해, 간단하게 React로 작성된 버튼 커포넌트를 스타일링 해보자.

styled함수가 리턴하는 것은 위에서 설명드린 것처럼 React 컴포넌트이기 때문에 JSX를 통해 자유롭게 사용할 수 있습니다.

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

const StyledButton = styled.button`
	padding: 6px 12px;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid lightgray;
    color: gray;
    background: white;
`;

function Button({ children }) {
	return <StyledButton>{children}</StyledButton>;
}

React 컴포넌트에서 다음과 같이 사용할 수 있다.

import Button from "./Button";
<Button>Default Button</Button>;

styled-components이 적용되었는지 확인하는 법은
브라우저에서 소스 보기를 해서 다음과 같이 <button> html 엘리먼트에
Styled Components가 자동으로 생성해준 클래스 이름이 적용되었음을 알 수 있습니다.

<button class="sc-kgAjT beQCgz">Default Button</button>

내부 스타일시트를 확인해보면 클래스 선택자(class selector)로 적용된 스타일이 위에서 styled Components로 삽입한 스타일과 동일함을 알 수 있다.

.beQCgz {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;
  color: gray;
  background: white;
}

가변 스타일링 1

Styled Components는 React 컴포넌트에 넘어온 props에 따라 다른 스타일을 적용하는 기능을 제공합니다. Tagged Template Literals을 사용하기 떄문에 함수도 문자열 안에 포함시킬 수 있다는 점을 이용하는데요.

예를 들어, 버튼의 글자색과 배경색을 props에 따라 바뀌도록 위에서 작성한 예제 코드를 변경해보자.
자바스크립트의 || 연산자를 사용하여 props가 넘어오지 않은 경우, 기존에 정의한 기본 색상이 그대로 유지되도록 합니다.

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

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;

  color: ${(props) => props.color || "gray"};
  background: ${(props) => props.background || "white"};
`;

function Button({ children, color, background }) {
  return (
    <StyledButton color={color} background={background} Î>
      {children}
    </StyledButton>
  );
}

여기서 주의할 점은 <Button/>에 넘어온 color와 background prop을 컴포넌트로 넘겨줘야 한다는 것입니다.
(그러지 않을 경우, 컴포넌트가 해당 prop을 인식할리가 없겠죠?)

자, 이제 다음과 같이 버튼을 사용하면 핑크 배경에 초록 글자를 갖도록 스타일된 버튼을 만들 수 있습니다.

import Button from "./Button";
<Button color="green" background="pink">
	Green Button
</Button>

가변 스타일링 2

prop에 따라 바꾸고 싶은 CSS 속성이 위와 같이 하나가 아니라 여러 개일 경우가 있습니다. 이럴 경우, Styled Components에서 제공하는 css 함수를 사용해서 여러 개의 CSS 속성을 묶어서 정의할 수 있습니다.

예를 들어, Primary prop이 넘어온 경우, 글자색을 흰색, 배경색과 경계색은 남색으로 변경하고 싶다면 다음과 같이 예제 코드를 수정할 수 있습니다. 이번에는 자바스크립트의 && 연산자를 사용해서, primary prop이 존재하는 경우에만 css 로 정의된 스타일이 적용되도록 하였습니다.

import React from 'react';
import styled, { css } from 'styled-components';

const StyleButton = styled.button`
	padding: 6px 12px;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid lightgray;
    
    ${(props) =>
    	props.primary &&
        css`
        	color: white;
            background: navy;
            border-color: navy;
          `}
    `;  
      
 function Button({ children, ...props}) {
 	return <StyledButton {...props}>{children}</StyledButton>;
 }

참고로 넘겨야할 prop값이 많아질 경우, 위와 같이 ...props구문을 사용해서 children 외에 모든 prop을 간편하게 전달 할 수 있습니다.

자, 이제 다음과 같이 하나의 prop 만으로 여러가지 css 속성이 한번에 적용된 버튼을 얻을 수 있습니다.

import Button from './Button';
<Button primary> Primary Button </Button>;