React Styled Component

최신 웹 앱을 스타일링하는 적절한 방법에 대해 많은 이야기가있었습니다. 문서 레벨에서 일반적이고 가장 오래된 스타일링 방법이 있습니다- style.css파일을 생성 하고 HTML 파일에서 링크하는 것이 더 최근에는 JS의 스타일링 방법입니다. 이것은 CSS-in-JS로 널리 알려져 있습니다.

CSS-in-JS는 CSS 모델을 문서 수준이 아닌 구성 요소 수준으로 추상화하는 스타일링 방식입니다. 이것은 CSS가 특정 구성 요소로만 범위가 지정 될 수 있고 문서 수준이 아니라는 개념입니다. CSS-in-JS를 사용하면 다음과 같은 이점이 있습니다.

• HTTP 요청 수 감소 : CSS-in-JS는 자산과 리소스를로드하기 위해 HTTP 요청을하지 않아도됨을 의미합니다.
• 스타일링 조각화 : CSS-in-JS를 사용하면 호환성 문제에 대한 걱정없이 자유롭게 스타일을 작성할 수 있습니다.

CSS-in-JS 접근법의 예는 styled-components 입니다. 스타일 구성 요소를 사용하면 클래스 이름 충돌에 대한 걱정없이 구성 요소에 일반 CSS를 작성할 수 있습니다. 단일 구성 요소로 범위가 지정되고 페이지의 다른 요소로 누출되지 않는 CSS를 작성하는 데 도움이됩니다.

스타일이 지정된 구성 요소 인 이유

스타일이 지정된 구성 요소를 사용하면 태그가 지정된 템플릿 리터럴을 사용하여 JavaScript로 CSS를 작성할 수 있습니다. 구성 요소와 스타일 간의 매핑을 제거합니다. 구성 요소는 하위 수준 스타일 구성으로 만들어집니다. 다음과 같은 이유로 스타일 구성 요소가 작성되었습니다.

• 자동 중요 CSS : 스타일이 지정된 구성 요소는 페이지에 렌더링되는 구성 요소를 추적하고 해당 스타일을 완전히 자동으로 주입합니다. 코드 분할과 결합하면 사용자는 필요한 최소량의 코드를로드 할 수 있습니다.
• 클래스 이름 버그 없음 : 스타일이 지정된 구성 요소는 스타일에 대한 고유 한 클래스 이름을 생성합니다. 중복, 겹침 또는 철자 오류에 대해 걱정할 필요가 없습니다.
• CSS를 쉽게 삭제 : 클래스 이름이 코드베이스 어딘가에 사용되는지 알기가 어려울 수 있습니다. 스타일링 된 구성 요소는 모든 스타일링이 특정 구성 요소에 연결되어 있으므로 분명합니다. 컴포넌트가 사용되지 않고 (툴링이 감지 할 수있는) 삭제되면 모든 스타일이 컴포넌트와 함께 삭제됩니다.
• 간단한 다이나믹 스타일링 : 소품 또는 글로벌 테마를 기반으로 컴포넌트의 스타일을 조정하는 것은 수십 개의 클래스를 수동으로 관리 할 필요없이 간단하고 직관적입니다.
• 무통 유지 관리 : 구성 요소에 영향을 미치는 스타일을 찾기 위해 다른 파일을 찾아 다닐 필요가 없으므로 코드베이스의 크기에 상관없이 유지 관리가 매우 중요합니다.
• 자동 공급 업체 접두사 : CSS를 현재 표준에 작성하고 Styled Components가 나머지를 처리하도록합니다.

일단 첫 번째로 

npm install --save styled-components

styled-components 를 install 해줍니다.

 

그런다음 

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

 

이렇게 스타일을 줄 수 있습니다.

출력화면

이렇게 쉽게 스타일드 컴포넌트를 사용할 수 있습니다. 자주 쓰이고 유용합니다 !