Styled Components 특징과 장점, 사용법

Styled Components

디지니, 코인베이스 등 많은 회사들이 css Styled Components를 사용하고 있다. styled components 이전에는 css 모듈을 활용하여 스타일링을 입혔다. className을 객체 형태로 사용했다. 하지만 className을 복사 붙여넣기를 해줘야하는 번거로움과 className을 중첩하여 사용하다보면 복잡함이 생긴다. Styled Components는 이런 문제를 해결해준다.

 

먼저 CRA로 프로젝트를 만들어주고 styled-components를 설치해주자.

npm i styled-components

 

Styled Components 특징

• Automatic critical CSS : 렌더링되는 구성 요소를 추적하고 해당 스타일만 완전히 자동으로 주입한다.
• No class name bugs : styled-components는 스타일에 대해 고유한 클래스 이름을 생성되어 중복 또는 맞춤법 오류에 대해 걱정할 필요가 없다.
• Easier deletion of CSS : 클래스 이름이 코드 어딘가에서 사용되는지 여부를 알기 어려울 수 있다. styled-components는 스타일이 특정 구성 요소에 연결되어 있기 때문에 이를 명확하게 만든다. 구성 요소가 사용되지 않고(도구가 감지할 수 있음) 삭제되면 모든 스타일도 함께 삭제된다.
• Simple dynamic styling : 전역 테마를 기반으로 구성 요소의 스타일을 조정하는 것이 간단하고 직관적이다.
• Painless maintenance : 구성 요소에 영향을 주는 스타일을 찾기 위해 여러 파일을 뒤질 필요가 없어 유지 관리가 쉽다.
• Automatic vendor prefixing : CSS를 현재 표준에 맞게 작성하고 나머지는 스타일 구성요소가 처리하도록 한다.

 

Styled Components 장점과 사용 예시

예시코드는 아래와 같다. Styled Components를 사용하여 태그에 의미를 부여하여 직관적으로 어떤 용도로 사용하는지 파악할 수 있고 jsx 내에 css를 적용할 때 카멜케이스로 작성해야하는 번거로움 없이 css 문법을 그대로 사용할 수 있다. 또한 랜덤으로 className을 지정해주어 중복되는 css가 없게 만들어준다. 그리고 Styled Components라는 이름에 맞게 props를 내려줘서 css의 속성을 조작할 수 있다. 그리고 확장하여 사용할 수 있는데 예시의 Circle을 보면 기존에 만들어둔 Styled Component의 속성을 그대로 가지고 와서 추가해서 사용할 수 있는 장점이 잇다.

import styled from "styled-components";

function App() {
  return (
    <Father>
      <Box bgColor="teal" />
      <Circle bgColor="tomato" />
    </Father>
  );
}

export default App;

const Father = styled.div`
  display: flex;
`;
const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;
const Circle = styled(Box)`
  border-radius: 50px;
`;

 

또 button 태그로 styled-components를 사용했지만 같은 속성의 a 태그를 만들고 싶다면 as를 사용하면 된다.

import styled from "styled-components";
const Father = styled.div`
  display: flex;
`;

const Input = styled.input.attrs({ required: true })`
  background-color: tomato;
`;

function App() {
  return (
    <Father as="header">
      <Btn>Log in</Btn>
      <Btn as="a" href="/">
      	Log in
      </Btn>
    </Father>
  );
}
export default App;

const Btn = styled.button`
    color: white;
    background-color: tomato;
    border: 0;
    border-radius: 15px;
`