<💅> Styled Components

Styled Components

CSS-in-JS 라이브러리 중 하나로, 컴포넌트 기반의 스타일링을 제공한다.

사진: CSS-Tricks | A Thorough Analysis of CSS-in-JS

• Styled Components는 CSS in JS 개념이 대두되면서 나온 라이브러리
• 리액트의 등장으로 컴포넌트 단위 개발이 주류가 되었지만, CSS는 여전히 분리되어 있다는 점을 해결하기 위해 나왔다.
• CSS in JS 라이브러리를 사용하면 HTML+CSS+JS를 묶어서 하나의 JS 파일로 관리할 수 있다는 장점이 있다.

Styled Components 설치하기

먼저 라이브러리를 설치한다.

# with npm
npm install --save styled-components

그 다음, package.json에 아래 코드 추가하기
여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여준다.

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

마지막으로 Styled Components를 사용할 파일에 불러온다.

import styled from "styled-components"

Styled Components 문법

1. 컴포넌트 만들기

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

• Tagged template literals 문법을 사용한다.
• 컴포넌트 선언 후 styled.태그이름을 할당하고 백틱 안에 CSS 문법을 작성한다.

2. 컴포넌트 재활용하기

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

• 컴포넌트를 선언하고 styled()에 재사용할 컴포넌트를 전달한다.
• 백틱 안에 추가하고 싶은 스타일 속성을 작성한다.

3. Props 활용하기

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

• Styled Components로 만든 컴포넌트도 props를 내려줄 수 있고, 조건부 렌더링이 가능하다.
• ${} 안에 props를 인자로 받는 함수를 만들어서 사용한다.

4. 전역 스타일링

먼저 Styled Components에서 createGlobalStyle 함수를 불러온다.

import { createGlobalStyle } from "styled-components";

이 함수를 사용해서 CSS 파일에서 작성하듯 설정하고 싶은 전역 스타일을 작성한다.

const GlobalStyle = createGlobalStyle`
	태그종류 {
      CSS속성1: 속성값;
      CSS속성2: 속성값;
      CSS속성3: 속성값;
	}
`

이렇게 만들어진 컴포넌트를 최상위 컴포넌트에서 사용해주면 전역에 컴포넌트의 스타일이 적용된다.

  function App() {
    return (
      <>
      	<GlobalStyle />
      	<Button>전역 스타일 적용하기</Button>
      </>
    );
}