Naming Styled Components

원본 https://medium.com/inturn-eng/naming-styled-components-d7097950a245

Naming Styled Components 기고글

1. 요약

• 다음과 같이 naming convention을 가지도록 하자

import Header from ‘Components/Header’;
import * as S from ‘./styles';
const Navigation = () => (
  <S.Navigation>
    <Header>{headerContent}</Header>
    <S.Content>{content}</S.Content>
  </S.Navigation>
);

장점:

• 모든 컴포넌트를 각각 import해올 필요가 없다.
• 스타일이 적용된 컴포넌트와 실제 컴포넌트를 구분할 수 있다.

단점:

• tree shaking 이 실패한다 ( 사용되지 않는 코드를 삭제하는 기술)
• 매우 작은 스타일 컴포넌트를 파일내에 생성하고 싶으면 어떻게 할까..

매우 작은 컴포넌트를 추가하고 싶을 때 제안 (S객체 를 생성)

import Header from ‘Components/Header’;
const S = {};
S.Navigation = styled.div`/* styles */`;
S.Content = styled.div`/* styles */`;
const Navigation = () => (
  <S.Navigation>
    <Header>{headerContent}</Header>
    <S.Content>{content}</S.Content>
  </S.Navigation>
);