Styled-Components

styled-components 는 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리이다.
이에 대한 대안으로는 emotion 와 styled-jsx가 있다.

Styled-Components설치

npm install styled-components

위에 설치된 styled-components패키지에서 styled함수를 import한다.

• 기존 스타일링

  const divStyle = {
  backgroundColor: "black",
  width: "100px",
  height: "100px",
  };
  return

• styled-components를 사용한 방식

  const StyledDiv = styled.div background-color: black; width: 100px; height: 100px; ;
  return

1) styled component 장점

• 컴포넌트 레벨로 추상화하는 모듈성
• 자바스크립트와 CSS 사이의 상수와 함수를 공유

2) styled component 단점

• 별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다.
• 인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다.