CSS in JS, Styled-Components

CSS in JS 중 하나인 styled-components의 시작에 대한 내용임!

styled-components는 React Components style 적용하기 위해 CSS를 어떻게 향상시킬 수 있는지 고민해낸 결과라고 합니다.
개발자를 위한 향상된 경험을 위해 styled-componets는 다음을 제공한답니다.

• Automatic critical CSS
• No class name bugs
• Easier deletion of CSS
• Simple dynamic styling
• Painless maintenance
• Automatic vendor prefixing

그렇구나,,,
CSS in JS 는 CSS와 JS를 결합하여 Components 스타일링을 쉽고 효율적으로 만들기 위한 방법이다. 하지만! 기존의 CSS in JS 라이브러리들은 CSS를 JS에 포함하여 작성하는 방식으로 동작하였고, 클래스 네임 충돌 문제 등 여러 문제가 발생했답니다! 그래서 styled-components 하나밖에 없는 unique class names를 만들어 중복을 걱정할 필요 없습니다! 또한, 코드의 가독성과 유지보수성이 향상되고, SSR 환경에서도 되고, 동적으로 스타일링도 되고, HTML 코드와 분리되지 않아 작성시간과 유지보수 시간이 단축된답니다!

목차

1. Installation

React 프로젝트에서 진행하시면 됩니다.

# with npm
npm install styled-components

# with yarn
yarn add styled-cpmponents

2. Getting Started

한줄씩 설명

import styled from "styled-components"

styled 사용하기 위한 import

const Title = styled.h1`
  font-size: 1.5rem;
  text-align: center;
  color: palevioletred;
`;

Title Components 생성, styled 적고, 그 뒤에 원하는 태그(h1)을 적어줌!
그러고 백틱(`)을 이용해 안쪽에 스타일을 적어준 것임! 글자크기 1.5rem, 가운데 정렬, 색깔 정한것!

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

마찬가지로 Wrapper Components 생성 후 원하는 태그 (section) 적고, 백틱 내에 스타일 입력

const Start = () => {
  return (
    <Wrapper>
      <Title>Hello World!</Title>
    </Wrapper>
  );
};

하고, 렌더링을 위해서 Arrow Function으로 Start를 생성하고 내부에 적어주었음!!

결과

개발자 도구를 통해 본 class name은 임의로 부여된 것을 확인할 수 있다!

<div class="App">
  <section class="sc-csCMJt jJWHlu">
    <h1 class="sc-irTswW fmiAtq">Hello World!</h1>
  </section>
</div>

---

이후 #2 에서는 Props, As 에 대해서 알아보겠다!