Styled Component

# Styled Components
-기능적(functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할수있는 아주 단순한 패턴을 제공한다.
-HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할수있게 된다. 그게 CSS in JS 라이브러리이고. 그중에서 현재 가장 인기있는 라이브러리가 Styled Components이다.
즉, Styled Component는 CSS-in-JS라이브러리 중 하나이다.
-CSS를 컴포넌트화 시킴

 

# 사용법

//설치하기
npm install --save styled-components

//styled-components를 사용할 파일로 불러와라.
import styled from "styled-components"


//package.json에 다음 코드를 추가하도록 권장한다. 
//추가하면 styled components가 설치되어 발생하는 문제를 줄여준다.
{
  "resolutions": {
  "styled-components": "^5"
}}

---

<Styled Components 문법>
1. 컴포넌트 만들기

-컴포넌트를 선언한후 styled.태그종류를 할당하고 백틱안에 css작성하던대로 스타일속성을 작성해주면 된다.
이렇게 만든 컴포넌트를 react컴포넌트를 사용하듯 리턴문안에 작성해주면 스타일이 적용된 컴포넌트가  렌더되는 것을 확인할수있다.

import styled from "styled-components";

const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

export default function App() {
  return <BlueButton>Blue Button</BlueButton>;
}

 

2.컴포넌트를 재활용해서 새로운 컴포넌트 만들기

-스타일 속성을 추가하기

-이미 만들어진 컴포넌트를 재활용해서 새로운 컴포넌트를 만드는 거다.
-컴포넌트를 선언하고 styled()에 재활용할 컴포넌트를 전달해준 다음, 추가하고 싶은 스타일 속성을 작성해주면 된다.
-재활용한 컴포넌트를 또 재활용할수도 있다.

import styled from "styled-components";

const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;

const BigRedButton = styled(BigBlueButton)`
  background-color: red;
`;

export default function App() {
  return (
    <>
      <BlueButton>Blue Button</BlueButton>
      <br />
      <BigBlueButton>Big Blue Button</BigBlueButton>
      <br />
      <BigRedButton>Big Red Button</BigRedButton>
    </>
  );
}

 

3.props활용하기

- styled Component로 만든 컴포넌트도 react컴포넌트처럼 props를 내려줄수있다. 내려준 props값에 따라서 컴포넌트를 렌더링하는 것도 가능하다.

1) props로 조건부 렌더링하기

const Button = styled.button`
background: ${(props)=> props.skyblue ? "skyblue" : "white"} 
`;



<Button skyblue>Button1</Button>
<Button>Button2</Button>

-삼항연산자를 활용해 <button> 컴포넌트에 skyblue라는 props가 있는지 확인하고, 있으면 배경색으로 skyblue를, 없으면 white를 지정해주는 코드이다.
-button1의 경우는 skyblue라는 props가 있어 배경색이 skyblue로 지정될거고,
-button2의 경우는 props가 아예없어 배경색이 white로 지정될거다.

 

2) props 값으로 렌더링하기

const Button = styled.button`
background: ${(props)=> props.color ? props.color: "white"}
`;

<Button>Button1</Button>
<Button color="orange">Button2</Button>
<Button color="tomato">Button3</Button>

const Button = styled.button`
background: ${(props)=> props.color || "white"}
`;

<Button>Button1</Button>
<Button color="orange">Button2</Button>
<Button color="tomato">Button3</Button>

-꼭 삼항연산자 안써도된다.

-color라는 이름으로 받은 props의 값으로 배경색이 지정된다.

 

4.전역 스타일 설정하기

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
button {
padding : 5px;
margin : 2px;
border-radius : 5px;
}
`

//만들어진 GlobalStyle컴포넌트를 최상위 컴포넌트에서 사용해주면된다.
function App() {
return (
<>
<GlobalStyle />
<Button>전역 스타일 적용하기</Button>
</>
);
}

---

실습하기 코드(내가공부할때 보려고 올리는거임. 퍼가지마셈.)

import styled from "styled-components";
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
button{
  margin: 0.5rem;
}`;

const Button = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: powderblue;
  border-radius: 1rem;
  transition: 0.5s;
  &:hover {
    background: cornflowerblue;
    color: white;
    transition: 0.5s;
  }
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button>Practice!</Button>
    </>
  );
}