styled-components

className의 명시적인 주입 없이 컴포넌트를 만들고 스타일을 적용하기

import React from 'react';
import styles from './styles.css';

/* ... */

<button className={"any-classname"}>Default CSS</button>

기본적인 CSS를 이용한다고 가정했을때, 위와 같이 사용하려는 스타일을 classname을 사용해서 일일이 지정해줘야 한다.

그닥 나쁜 경우는 아니지만, CSS 내의 Classname 중복 문제도 걱정해야 하고. Props를 받아서 처리 하기도 번거롭다.

styled-components로 작성해보기

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

const Button = styled.button`
    {...any-button style};
`;

/* ... */

<Button>Styled Button</Button>

위와 같이 처리하면 classname의 고질적인 문제를 훨씬 멋지게 회피 할 수 있다.

Styled component에 Props를 전달하기

우리는 버튼을 만들고자 하고, props로 'color'라는 값이 넘어오면 props의 color값을 Background 값으로 사용하고자 한다.

그리고 props의 'color' 라는 값이 없다면 노란 색깔로 Background를 칠할 것이라는 조건부 스타일링을 아래와 같이 할 수 있다.

const Button = styled.button`
    background: ${props => props.color ? props.color : 'yellow'};
`;

{...}

<Button>Default yellow button</Button>
<Button color={"red"}>Custom red button</Button>

Styled component를 상속받기

새로이 제작한 Button 이라는 컴포넌트를 상속받아서 RedButton을 만들고자 한다면, 아래와 같이 할 수 있다.

const Button = styled.button`
    background-color: yellow;
  border: 1px solid red;
  color: green;
`;

// extends <Button />
const RedButton = styled(Button)`
    &:hover {
        background-color: red;
    }
`;

<Button>Default Button</Button>
<RedButton>Red Button!!!!!</RedButton>

As 속성

만약 Button 컴포넌트의 스타일은 그대로 쓰고싶지만, 태그의 종류를 button이 아닌 a 태그로 바꾸고 싶을땐 'as' 속성을 이용하여 아래와 같이 구현할 수 있다]

{...}

<Button as={"a"} href={"/yeah"}>I am a tag!</Button>

Attributes 삽입하기

attrs 라는 속성을 사용해서 고정되는 Props나 다이나믹한 Props, 기본 Tag의 props 등을 전달할 수 있다.

const Input = styled.input.attrs(props => ({
// 고정적인 Props를 전달할 수 있습니다.
type: "password",

// 혹은 다이나믹한 Props도 전달할 수 있습니다.
size: props.size || "100px",
}))`
 width: ${props => props.size};
`;

<Input placeholder={"default size input!"}  />
<Input placeholder={"bigger size input!"} size={"200px"} />

애니메이션

classname과 마찬가지로 이름 충돌을 피하기 위해서 전역으로 선언하는 animation을 추천하지 않는다.

그에 대한 해결책으로 styled components에선 keyframes 라는 것을 지원한다.

const colorChange = keyframes`
    from {
        background-color: red;
    }

    to {
        background-color: yellow;
    }
`;

const ColorButton = styeld.button`
    animation: ${colorChange} 1.5s linear infinite;
    width: 10rem;
    height: 3rem;
`;

{...}

<ColorButton>화려한 버튼입니다!</ColorButton>

Styled comonents를 만들때 금기사항

절대로 render 안쪽에 Styled component를 선언해서는 안된다. 리렌더링이 될 때 마다 요소를 새로 제작하기 때문에, 매우 비효율적인 컴포넌트가 완성될 수 있다.

금기시 되는 코드

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

const AnyComponent = () => {
    // 절대 여기서 선언하면 안됩니다!
    const Button = styled.button`
        {button styles...};
    `;

    return (
        <Button>Bad!!!!</Button>
    );
}

return AnyComponent;

정상적인 코드

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

const Button = styled.button`
   {button styles...};
`;

const AnyComponent = () => {
   return (
       <Button>Good!</Button>
   );
}

return AnyComponent;