❤️🔥 Styled Components
- 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴을 제공
- 기존 DOM을 만드는 방식인 CSS, SCSS 파일을 밖에 두고, 태그나 id, class 이름을 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것이다. CSS 파일을 밖에 두지 않고, 컴포넌트의 내부에 넣기 때문에 CSS가 전역으로 중첩되지 않는다.
- CSS in JS 라는 개념이 대두되면서 나온 라이브러리, HTML, CSS, JS 파일로 쪼개 개발하던 방법에서, React 등의 라이브러리의 등장으로 컴포넌트 단위 개발이 주류가 됐지만 CSS는 그러지 못했다는 점에서 출발한 개념이다.
- CSS in JS 라이브러리 사용 시, CSS도 쉽게 JS 안에 넣을 수 있으므로 HTML+CSS+JS 까지 묶어 하나의 JS 파일 안에서 컴포넌트 단위로 개발할 수 있게 된다. 이런 CSS in Js 라이브러리 중 가장 인기 있는 라이브러리가 바로 Styled Components이다.
🤔 Styled Components 설치
// npm 설치
npm install
// Styled Components 라이브러리 설치
yarn add
// package.json에 아래 코드를 추가하는 것을 권장
// 여러 버전의 Styled Components가 설치돼 발생하는 문제를 줄여 줌
{
"resolutions": {
"styled-components": "^5"
}
}
// Styled Components를 사용할 파일 불러오기
import styled from "syled-components"
❤️🔥 Styled Components 문법
1. 컴포넌트 만들기 & 컴포넌트 재활용 하기
2. Props 활용하기
3. 전역 스타일 설정하기
🤔 createGlobalStyle ?
margin: 0,padding: 0,font-family와 같이 Global한 속성들을 적용시킬 수 있게 하는 방법- createGlobalStyle를
import하여 GlobalStyle을 생성해 주어 적용시킬 CSS를 입력해 주면 된다.
// createGlobalStyle 함수 불러오기
import { createGlobalStyle } from "styled-components";
// 설정하고자하는 CSS 속성 정의하기기
const GlobalStyle = createGlobalStyle`
button {
padding : 5px;
margin : 2px;
border-radius : 5px;
}
`;
export default GlobalStyle;
// 다음과 같이 정의하였다면 적용하고자하는
// 파일의 최상위 컴포넌트에 명시해 준다면, 전역 스타일로 사용할 수 있다.❤️🔥 실습
- styles.css 파일을 보고 이 버튼을 Styled Components의 컴포넌트로 바꾸기
