[React] Styled-components 사용법과 유용한 기능들

리액트 개발을 할 때 CSS를 적용하기 위해서는 따로 css파일을 만들어서 js, jsx 파일에 import하거나 인라인으로 지정해줬어야 했습니다. 전자의 경우는 파일의 개수가 늘어나고 클래스 네임을 일일이 붙여줘야 된다는 불편함이 있고 후자의 경우는 jsx방식으로 css스타일을 지정해줘야 한다는 불편함이 따르죠.

 

이것들을 해결해주고 조금더 리액트 스럽게 스타일을 적용할 수 있으며 여러 강력한 기능들을 제공해주는 styled-components를 소개합니다.

 

styled-components 설치

npm install styled-components

 

js 파일에 import

import styled from "styled-components";

 

styled-components 사용법

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${props=>props.bgColor}
`

function App() {
  return (
      <Box/>
  );
}

이 밖의 여러 강력한 기능들이 있습니다.

 

props, attr, as, nested