Styled Components

CSS에 정의하는 html style을 javascript단에서 정의할 수 있도록 도와주는 library이다.

---

설치

터미널에서

npm install styled-components

컴포넌트 js 파일에서

import styled from 'styled-components';

---

사용법

변수에 html요소를 style과 함께 정의한다.

let button = styled.button`
  background : ${ props => props.bg };
  color : ${ props => props.bg == 'blue' ? 'white' : 'black' };
  padding : 10px;
`;

styled.HTML태그 로 정의하고 상세 style은 백틱(`) 내부에 css처럼 정의하면 된다.

이 또한 컴포넌트이므로 props를 사용할 수 있는데, javascript로 정의하는 것인만큼 프로그래밍적 요소를 접목할 수 있다. (예제의 삼항연산자라던지)

<button bg='black'>버튼</button>

위와 같은 형식으로 호출하면 button에 정의된 style의 HTML 요소를 보여준다.

---

장점

• js 내에 정의한 스타일이 타 js로 오염되지 않는다.
• 페이지 로딩 시간을 단축해준다.
• style 정의시 javascript와 같이 프로그래밍적 요소를 통해 정의할 수 있다.

단점

• js 파일 내용이 길어지는 경우 내용이 복잡해지는 원인이 될 수 있다.
• 동일한 스타일을 타 js파일에서 똑같이 정의해서 사용하는 경우 css파일을 사용하는 것이 더 나음

Component 종속적 css 파일 정의

• ComponentName.js 라는 component가 있을 경우 ComponentName.module.css로 css파일명을 정의하면 해당 Component 종속적으로 css가 동작한다.