Styled Components 문법 총정리

CCD 
(Componet Driven Development)

 

만약 기획자가 이전에 사용했던 버튼을 이번에도 사용하자고 합니다

그렇다면 디자이너와 개발자는 새롭게 버튼을 만들어야 할까요?

재사용 할 수 있는 UI 컴포넌트가 필요하겠죠!

 

이 고민을 해결하기 위해 등장한 개발 방법이 바로 Componet Driven Development(CCD) 입니다

레고처럼 부품 단위로 UI 컴포넌트를 만들고 조립해나가는 개발입니다

 

 

CSS in JS

 

CSS가 복잡해짐에 따라, CSS도 컴포넌트 영역으로 불러들이게 됨!

 

CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 됩니다.

이런 CSS in JS 라이브러리 중에서 현재 가장 인기 있는 라이브러리가 바로 Styled Components입니다

 

 

 

 

Styled Components 문법

 

 

1. 컴포넌트 만들기

const 컴포넌트이름 = styled.태그종류 `
 CSS속성1: 속성값;
 CSS속성2: 속성값;
`;

 

(백틱을 사용하니 주의!)

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

//<실제예시> : html 로 button태그는 만들어둔 상태
// (App.js)

import styled from "styled-components"; // 라이브러리 Styled Components 불러옴

//styled.태그종류로 BlueButton 이라는 컴포넌트를 만들었다
const BlueButton = styled.button `
 background-color: blue;
 color: white;
`;

export default function App(){
    //React 컴포넌트를 사용하듯이 사용하면 됩니다
    return <BlueButton>BlueButton</BlueButton>
}

 

 

 

 

 

 

 

 

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

const 컴포넌트이름 = styled(재사용할 컴포넌트)`
 추가할 CSS속성1: 속성값;
 추가할 CSS속성2: 속성값;
`

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

 

//<실제예시> : html 로 button태그는 만들어둔 상태
// (App.js)

import styled from "styled-components"; // 라이브러리 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(){
    <>
    <BlueButton>Blue Buttom</BlueButton>
    <BigBlueButton>Big Blue Button</BigBlueButton>
    <BigRedButton>Big Red Button</BigRedButton>
    </>
}

 

 

 

 

 

 

 

 

3. Props 활용하기

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

 

const 컴포넌트이름 = styled.태그종류`
 CSS속성 : ${(props)=> 함수코드}
`;

 

styled Components는 템플릿 리터럴 문법(${})을 사용하여 자바스크립트 코드를 사용할 있음
props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 됨

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

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

<Button skyblue>Button1</Button> =>파란색버튼
<Button>Button2</Button> => 하얀색버튼

 

//<실제예시>
import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";

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

export default function App(){
    return(
    <>
      <GlobalStyle />
      <Button1>Button1</Button1> //흰색버튼
      <Button1 skyblue>Button1</Button1> //파란버튼
    </>
    );
}

 

 

 

 

 

 

2. props 값으로 조건부 렌더링하기

 

props뿐만 아니라 props의 값을 통째로 활용해서 컴포넌트에 렌더링 할 수 있습니다

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

// props.color가 존재하면 props.color를 따르고, 그렇지 않으면 white를 따름

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

 

//<실제코드>
import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";

//받아온 prop값을 그대로 이용해 렌더링할 수도 있습니다
const Button1 = styled.button`
 background: ${(props)=> props.color ? props.color: "white"};
`
//다음과 같은 형식으로도 활용할 수 있습니다.
const Button2 = styled.button`
 background: ${(props)=> props.color || "white"};
`


export default function App(){
    return (
        <>
        <GlobalStyle/>
        <Button1>Button1</Button1>
        <Button1 color="orange">Button1</Button1>
        <Button1 color="tomato">Button1</Button1>
        <br />
        <Button2>Button2</Button2>
        <Button2 color="pink">Button2</Button2>
        <Button2 color="turquoise">Button2</Button2>
        </>
    )
}

 

 

 

 

 

 

 

4. 전역스타일 설정하기

 

스타일을 컴포넌트로 만들 수 있다는 것은 좋지만, 전역에 스타일을 설정하고 싶을때는 어떻게 하면 좋을까요?
Styled Components는 이런 경우를 대비한 컴포넌트도 준비해 놓았습니다.

 

//우선 전역스타일을 설정하기 위해 Styled Components에서 createGlobalStyle 함수를 불러옵니다.
import { createGlobalStyle } from "styled-components";

//그 다음 이 함수를 이용해 CSS 파일에서 작성하듯 스타일을 설정합니다
const GlobalStyle = createGlobalStyle`
 button {
    padding:5px;
    margin:2px;
    border-radius:5px;
 }
`

//이렇게 만들어진 <GlobalStyle> 컴포넌트를 최상위 컴포넌트에서 사용해주면
//전역에 <GlobalStyle> 컴포넌트의 스타일이 설정됩니당
function App(){
    return(
        <>
        <GlobalStyle></GlobalStyle>
        <Button>전역 스타일 적용하기</Button>
        </>
    )
}