Styled-component

What is styled-components?

: CSS 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 (styled components) 형태로 만들어주는 오픈소스 라이브러리이다.

→ 컴포넌트 개념을 사용하기 때문에 리액트와 잘 맞는다.

• 한 문서 안에 모든 코드를 담을 수 있어서 scss와 jsx를 따로 사용할때보다 가독성이 높아진다는 장점이 있다. (사람마다 다를 수 있음)

1. styled-component 설치

npm install --save styled-components

#yarn을 사용하는 경우
yarn add styled-components

2. styled-components 기본 사용법

• styled-component는 태그드 템플릿 리터럴 (tagged template literal)을 사용하여 구성 요소의 스타일을 지정한다.

• template literal 이란? → 자바스크립트에서 제공하는 문법 중 하나.

  • backticks(`)로 둘러싸인 문자열 부분에 CSS 속성을 넣고 태그 함수 위치에는 styled.<HTML태그> 형태로 사용한다.

import React from "react";
import styled from "styled-components";

const Button = styled.button`
	color: white;
	background: gray;
	border: 1px solid black;
`;

sample = (props) => {
return(
	<div>
		<Button> Original </Button>
	</div>

export default Sample;

위 예시처럼 styled-components는 태그드 템플릿 리터럴을 사용하여 CSS 속성이 적용된 리액트 컴포넌트를 만들어준다.

3. styled-components의 props 사용하기.

props를 통해 styled-components에서는 조건이나 동적으로 변하는 값을 사용해서 스타일링을 하는 것도 가능하다. 이는 react의 props와 일맥상통한다.

import React from "react";
import styled from "styled-components";

const Button = styled.button`
  color: ${(props) => (props.dark ? "white" : "black")}; /* 텍스트 색상 변경 */
  background: ${(props) => (props.dark ? "gray" : "white")}; /* 배경색 변경 */
  border: 1px solid black;
`;

const App = (props) => {
  return (
    <div>
      <Button>Original</Button>
      <Button dark>Dark</Button>
    </div>
  );
};

export default App;

위의 코드에서는 Button이라는 컴포넌트가 등장한다. styled-components가 사용된 부분의 CSS 속성을 보면 내부에 props를 사용하여 props로 Button에 dark를 넣어주고 있다.
이렇게 들어간 props는 그대로 styled-components로 전달된다.

이 외에 기능들에 대해서는 공식 문서를 참고하길 바란다.
https://styled-components.com/