Styled-Components

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

설치

npm install styled-components

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

• 기존 방식

  const divStyle = {
  backgroundColor: "black",
  width: "100px",
  height: "100px",
  };
  return <div style={divStyle}></div>

• styled-components사용 방식

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

기존에는 style 속성에 객체를 전달하거나 className을 설정하고 별도의 css파일을 import하는 방식을 사용
styled-components는 style이 적용된 Component를 직접 생성하는 방식 사용