[React] CDD 개발 도구 Styled Components

🔖  CSS in JS 라이브러리란?

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

 

---

 

🔖  Styled Components 설치하기

// 1. 터미널에 아래의 명령어 한 줄을 입력한다.

# with npm
$ npm install --save styled-components

# with yarn
$ yarn add styled-components

// 2. package.json에 다음 코드를 추가(권장하는  편)  
// 아래의 코드를 추가하면 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여준다.

{
  "resolutions": {
    "styled-components": "^5"
  }
}

// 3. Styled Components를 사용할 파일로 불러온다.

import styled from "styled-components"

 

---

 

🔖  Styled Components 문법

 

1.  컴포넌트 만들기

• Styled Components는 ES6의 Templete Literals 문법을 사용한다.
• 즉, 따옴표가 아닌 백틱(`)을 사용한다.
• 컴포넌트를 선언한 후 styled.태그종류를 할당한다.
• 백틱 안에 기존에 CSS를 작성하던 문법과 똑같이 스타일 속성을 작성한다. 
• React 컴포넌트를 사용하듯 리턴문 안에 작성해주면 스타일이 적용된 컴포넌트가 렌더되는 것을 확인할 수 있다.

 

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


const BlueButton = styled.button` //<-백틱(1)
	background-color: blue;
    color: white;

`; //<-백틱(2)

import styled from "styled-component";

// 1. Styled Component로 컴포넌트 만든다.
// 컴포넌트를 선언(const BlueButton)한 후 styled.태그종류(styled.button)를 할당
const BlueButton = styled.button` //<-백틱(1)
	background-color: blue;
    color: white;

`; //<-백틱(2) 여기 백틱은 잘 안보이니 눈 크게 떠야함 👀

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

 

---

 

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

컴포넌트를 선언하고 styled() 에 재활용할 컴포넌트를 전달해준 다음, 추가하고 싶은 스타일 속성을 작성한다.

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

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

import style from "styled-components";

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

//만들어진 BlueButton 컴포넌트를 재사용해서 새 컴포넌트 만들기
const BigBlueButton = styled(BlueButon)`
	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>
    </>
  );
}
    )