[React-TS] styled-components 사용하기

본 글은 제가 타입스크립트를 쓰는 관계로 타입스크립트 기준으로 설명되어 있습니다

일단 까세요

npm i --save-dev styled-components
npm i --save-dev @types/styled-components

그리고 이걸 왜쓰는지 이런거는 알면 매우좋은데 귀찮으니 딴 게시글 두어개쯤 보십쇼

1. 기본 문법

const Name = styled.div`
 color:black;
 background-color:white;
`

이런식으로 열심히 만든 뒤에

const 이름 = styled.태그명`
  스타일1;
  스타일2;
  스타일3;
`
<이름>엄준식</이름> // 이런식으로 컴포넌트에서 갖다씁니다

구조는 이런식입니다 나중에 고수되시면 파일 분리해서도 한번 해보세요

import styled from "styled-components";

const Name = styled.div`
  color: black;
  background-color: white;
`;

export default function Main() {
  return <Name>안녕하세요</Name>;
}

2. props

// props 타입지정 꼭 해주시고요

type BadgeType = {
  color?: string;
};

const Badge = styled.span<BadgeType>`
  padding: 5px;
  margin: 10px;
  border-radius: 3px;
  background-color: ${(props) => props.color};
`;

<Badge color={red}>어음</Badge>
<Badge color={blue}>어음</Badge>
<Badge color={green}>어음</Badge>
<Badge color={white}>어음</Badge>
<Badge color={black}>어음</Badge>

대충 눈치 채셨겠지만 props로 주어진 색상을 가진 태그가 완성됩니다 이게 props문법이고요
약간 더 응용하자면 props로 숫자같은거 보내서

이런 UI도 만들수있지 않을까요 삼항연산자 쓰면 가능합니다

3. 상속

말그대로 내 위에있는 친구를 갖다가 내가 가져와서 내맘대로 개조할수 있구요 상속 받는쪽에서 지정하는데 무조건 제일 높은 중요도를 가집니다.
님들이 아시는 그 상속 맞아요

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 얘가 기본 버튼 생김새 뺏어와서 색상 지맘대로 바꿨습니다 
const TomatoButton = styled(Button)` 
  color: tomato;
  border-color: tomato;
`;

4. Polymorphic prop

이건 뭐냐면 유명한 React 컴포넌트 패턴인데 그냥 as로다가 해당 태그가 어떤 태그인지 정해준다고 생각하면 됨

const Component = styled.div`
  color: red;
`;

<Component as="button" onClick={() => alert("It works!")}>
  Hello World!
</Component>;

이렇게 하면 div가 아니라 빨간글씨의 버튼이 생김

5. attrs

HTML안에 있는 여러 요소들을 지정해주는것

const Input = styled.input.attrs({
    type: "text"
})`
    font-size: 14px;
    padding: 2px 5px;
    border: 1px solid green;
`

<input type="text" /> // 이거랑 같은 효과를 가짐

6. Nesting

쉽게 말하면 styled-components 안에서 css코드 작성 가능

const Nestring = styled.div`
  padding: 2em 1em;
  background: papayawhip;
  > p {
    text-decoration: underline;
  }
  ${Card} { 
    color: blue;
  }
`; // 이런식으로 다른 styled-components도 css로 재껴오기 가능

const Card = styled.div`
  color: red;
`;

7. Animation

이건 그냥 keyframes 하나 만들어서 css랑 똑같이 쓰십쇼

/* 1.keyframes를 import하고 */
import styled, { keyframes } from "styled-components"; 

/* 2. css코드를 씀. */
const rotate = keyframes` 
0%{
    transform: rotate(0deg);
    border-radius: 0px;
}
50%{ 
    border-radius: 100px;
}
100%{
    transform: rotate(350deg);
    border-radius: 0px;
}
`;


const Box = styled.div` 
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: bisque;
  animation: ${rotate} 1s linear infinite; 
  /* 3. 여기도 이런식으로 css코드를 씀. */
   span {
    font-size: 20px;
    &:hover {
      font-size: 40px;
    }
  }
`;