[TIL - Styled-components]

🚨 Styled-components에 대해서 알아보자,,,,

🌀 Styled-components를 사용하는 이유

• 자동 중요 Css : styled-components는 페이지에서 렌더링되는 구성 요소를 추적하고 완전히 자동으로 해당 스타일만 삽입합니다. 코드 분할과 함께 이는 사용자가 필요한 최소한의 코드를 로드함을 의미합니다.
• class 이름 버그 없음 : styled-components는 스타일에 대한 고유한 클래스 이름을 생성합니다. 중복, 중복 또는 철자 오류에 대해 걱정할 필요가 없습니다.
• Css의 더 쉬운 삭제 : 클래스 이름이 코드베이스의 어딘가에서 사용되는지 여부를 알기 어려울 수 있습니다. styled-components는 스타일의 모든 비트가 특정 구성 요소에 연결되어 있기 때문에 이를 분명히 합니다. 구성 요소가 사용되지 않고(도구가 감지할 수 있음) 삭제되면 해당 구성 요소의 모든 스타일도 함께 삭제됩니다.
• 단순 동적 스타일링 : 수십 개의 클래스를 수동으로 관리할 필요 없이 props 또는 전역 테마를 기반으로 구성 요소의 스타일을 적용하는 것이 간단하고 직관적입니다.
• 손쉬운 유지 관리 : 구성 요소에 영향을 주는 스타일을 찾기 위해 다른 파일을 검색할 필요가 없으므로 코드베이스가 아무리 크더라도 유지 관리는 케이크 조각입니다.
• 자동 공급업체 접두사 : Css를 현재 표준으로 작성하고 나머지는 styled-components가 처리하도록 합니다.

🌀 styled-components 설치 방법

$ with npm
npm install --save styled-components
$ with yarn
yarn add styled-components

설치한 후에는
{
"resolutions": {
"styled-components": "^5"
}
}
package.json 파일에 적용되어 있는 것을 확인 할 수 있다.

🌀 작성 방법

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;