Styled component : css-in-js는 왜 필요할까?

css-in-js는 왜 필요할까?

1. 전역 충돌
2. 의존성 관리 어려움
3. 불필요한 코드, 오버라이딩
4. 압축
5. 상태 공유 어려움
6. 순서와 명시도
7. 캡슐화

style-components를 사용하려면!

npm install style-components --save

그리고

import {styled } from "styled-components";

사용할 곳에 임포트 해주면 돼.

하다 보면 이렇게 사용하는 것 같던데, css를 백틱을 사용해서 하더라고? 왜 그럴까 알아보니

import "sanitize.css";
import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
body {
    padding : 0;
    margin : 0;
}
h1 {
    margin : 0;}

    `;

styled-components의 백틱(``) 문법

왜 백틱을 쓰냐?

JavaScript의 "템플릿 리터럴" 문법임.

// 일반 문자열
const name = "안녕" + "하세요";

// 템플릿 리터럴 (백틱)
const name = `안녕하세요`;

styled-components에서 왜 이렇게 쓰냐?

CSS 코드를 "문자열처럼" 전달하기 위해서임.

// 이렇게 CSS를 그냥 문자열로 넣는 거임
export const GlobalStyle = createGlobalStyle`
  body {
    padding: 0;
    margin: 0;
  }
`;

백틱 안에 있는 내용이 CSS 코드 그대로 createGlobalStyle 함수에 전달됨.

일반 문자열이랑 뭐가 다른데?

1. 여러 줄 쓰기 편함

// 일반 문자열 - 불편함
const css = "body { padding: 0; margin: 0; }";

// 백틱 - 편함
const css = `
  body {
    padding: 0;
    margin: 0;
  }
`;

2. 변수 넣기 가능

const color = "red";

const Button = styled.button`
  background: ${color};  // 변수 사용 가능!
`;

정리하면

createGlobalStyle`CSS 코드`

• 백틱 안에 CSS 코드를 그냥 쓰면 됨
• styled-components가 알아서 처리해줌
• "CSS를 JavaScript 안에 문자열로 넣는 방법"임