Styled Components란?

---

styled components는 javascript에서 css를 사용 할 수 있도록 도와주는 스타일링 프레임워크입니다.

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

왜 Styled Components를 사용하는가?
Component가 많을 경우, class명이 중복될 수 있는 문제가 발생할 수 있다. 이를 방자하기 위해 class 선언 없이 component에 css를 직접 장착하는 방식을 사용하면 각 components간의 중복이 발생할 필요도 없고, 따라서 class명이 중복되는 일도 막을 수 있다.

• style이 적용된 컴포넌트를 직접생산하기 때문에 스타일코드 사용량이 줄어들고 , 가독성도 높습니다.

<시작>
1. Styled Components 설치하기

with npm
$ npm install --save styled-components

{
  "resolutions": {
    "styled-components": "^5"
  }
}
를 설치할 시 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여줍니다.

2.import

import styled from "styled-components"로 불러오기

Styled Components 문법

---

const 컴포넌트 이름 = styled.태그종류 css속성 : 속성값 ...
중요한점 : 문자열탬플릿 문법을 사용하여 백틱을 써야한다
리엑트컴포넌트처럼 리턴문안에 넣어주면 된다

<예시>

import styled from "styled-components";

//Styled Components로 컴포넌트를 만들고
const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

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

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

const 컴포넌트 이름 = styled(재활용할 컴포넌트) 추가할css속성 :속성 값

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

const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;
처럼 기존 컴포넌트를 재활용할 수 있다

3. Props 활용하기
Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있습니다. 내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능합니다.

const컴포넌트이름 =styled.태그종류 css속성: ${(props)=>함수코드} //props를 받아오려면 props를 인자로 받는 함수를 만들어사용하면 된다

props로 조건부렌더링

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

4.전역스타일 설정하기

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
    
    <GlobalStyle /> 리턴문안에 추가해주기

hover사용시 &hover{}쓰면댐

참고자료
<코드스테이츠>