Styled Components

Styled Components란?

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

Styled Components 설치

터미널에 아래의 명령어를 입력하여 Styled Components를 설치한다.

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

    # with yarn
    $ yarn add styled-components

Styled Components는 package.json에 다음 코드를 추가하도록 권장하고 있다.
아래의 코드를 추가하면 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여준다.

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

그 다음 Styled Components를 사용할 파일로 불러와주면 된다.

  import styled from "styled-components"

Styled Components 문법

1. 컴포넌트 만들기

Styled Components는 ES6의 Templete Literals 문법을 사용합니다. 즉, 따옴표가 아닌 백틱을 사용한다.
컴포넌트가 선언한 후 styled.태그종류로 할당하고, 백틱안에 기존 css를 작성한다.

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

이미 만들어진 컴포넌트를 재활용해서 새로운 컴포넌트를 만들 수 있다.
컴포넌트를 선언하고 styled()에 재활용할 컴포넌트를 전달해준 다음, 추가하고 싶은 스타일 속성을 작성한다.

3. Props 활용하기

Styled Componets로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄수있다.
내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능하다.

Styled Components는 템플릿 리터럴 문법( ${ } )을 사용하여 JavaScript 코드를 사용할 수 있다. props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 된다.

3-1) Props로 조건부 렌더링

*3-2) Props 값으로 렌더링하기

꼭 삼항연산자만 사용해야하는 것은 아니다.

4. 전역 스타일 설정하기

우선 전역 스타일을 설정하기 위해 Styled Components에서 createGlobalStyle 함수를 불러온다.

  import { createGlobalStyle } from "styled-components";

그 다음 이 함수를 사용해 CSS 파일에서 작성하듯 설정해주고 싶은 스타일을 작성해준다.

	const GlobalStyle = createGlobalStyle`
      button {
          padding : 5px;
      margin : 2px;
      border-radius : 5px;
	}
	`

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

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