Library | Styled Component

📍 CSS in JavaScript

CSS in JavaScript는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.

inline style과 비슷한 느낌이지만 inline style은 인라인 태그로 style을 정의하는 반면 CSS in JavaScript는 style태그를 따로 정의하고 해당 태그에 클래스화 시켜서 연결 하는 방식으로 동작한다는 점에서 큰 차이가 있다.

컴포넌트에 임의의 클래스가 지정된 모습

📍 Styled Component

Styed Component는 CSS in JavaScript 방식의 스타일이다.

#1. Styled Component의 장단점

장점	단점
컴포넌트 레벨로 추상화하는 모듈성	별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다.
자바스크립트와 CSS 사이의 상수와 함수를 공유	인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다.

#2. Styled Component의 사용법

설치

npm i styled-components

작성법

const 컴포넌트명 = styled.태그명``;
// 백틱 안에 스타일을 작성한다.

예시

return (
      <Container>
        <HomeContainer>

        </HomeContainer>
      </Container>
    );

const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
`;
const HomeContainer = styled.div`
  width: 100%;
  height: 100%;
  &::after{
    display : flex
    justify-content : center
  }
`;
// scss처럼 & 선택자를 사용할 수도 있다.