왜 스타일컴포넌트를 쓰는가?

css의 오염을 막을 수 있다.

=>대규모 어플리케이션 프로젝트의 경우에는 CSS파일의 부피가 커지고, 복잡해질 수 있다.

moulde.css 이런식으로 짜지 않아도 컴포넌트 내에서 쓰이기때문에 관리가 용이해짐

div투성이의 코드를 짜지않을 수 있게 됀다.

function App() {
  return (
    <Wrapper/>
     <Father >
       <Input/>
        Log in  </Btn>
          <Box bgcolor="teal"/>
          <Text>Hello</Text>
        <Circle bgcolor="tomato"/> */}
     </Father>
  );
}

이런식으로 코드가이뻐짐

SSR 서버사이드렌더링

Styled-components 는 서버 사이드 렌더링을 지원합니다. 기본 아이디어는 서버에서 앱을 렌더링 할 때마다 ServerStyleSheet 컨텍스트 API를 통해 스타일을 허용하는 공급자를 생성하고 반응 트리에 추가 할 수 있다는 것입니다.

이것은 키 프레임과 같은 전역 스타일을 방해하지 않으며 createGlobalStyle React DOM의 다양한 SSR API와 함께 스타일 구성 요소를 사용할 수 있습니다.

React와 찰떡궁합이다.

props를 내려줘서 사용할 수 있다.
여기서 props는 boolean 값으로 오고, 그 값에 따라 css값을 변경할 수 있는데, 템플릿 리터럴(${변수})로 props를 가져와서 연결 가능하다.
-> JSX 문법과 같이 사용할 수 있다!

모바일 지원

모바일 개발에도 React Native를 사용하는 React 코드베이스가 있는 팀의 경우 styled-components 는 솔루션 중 하나입니다. 플랫폼 간 일관성이 우선이라면 styled-components 를 React Native에 묶을 수 있어서 기쁩니다!

스타일이 지정된 컴포넌트가 있는 React Native에서 JSX 코드를 쉽게 읽을 수 있도록 주석에 별명을 지정할 수 있습니다. 또한 간단하게 호출하여 모든 구성 요소를 사용자 지정 컴포넌트로 변환하여 styled-components 로 변환 할 수도 있습니다 .styled()

스타일 스코프

프론트 엔드 툴링 세계에서 Vue 팀은 스타일 범위를 정립 한 최초의 사람이었습니다. 전문가가 아닌 CSS 사용자의 경우 스타일 시트에서 특정 요소 또는 클래스의 스타일을 변경하면 실제로 실망스럽고 관련이 없는 다른 요소에 역으로 영향을 미친다는 사실은 DOM 에서 동작하는 CSS 사용에 대해 매우 성가신 일이 있습니다. 이는 styled-components 를 Vue 와 같이 구성 요소 기반이며 범위가 넓기 때문에 이를 사용하는 좋은 이유입니다.