styled-components best practice

참고자료
스타일드 컴포넌트 베스트 프랙티스

1. 컴포넌트 파일과 스타일 파일을 분리하여 컨트롤 할 수 있다.
   엄청 짧은 컴포넌트여서 파일상단에는 컴포넌트를, 하단에는 스타일드 컴포넌트를 배치하는 구조를 가질 수 있지만, 규모가 커지면서 컴포넌트의 개수가 너무 많아지면 혼동이 올 수 있다.

ComponentName
├─index.jsx
└─styles.js

2. 임포트 할때 명명된 애를 가져올수 있지만(import { Headline } from), import * as St, import * as S처럼 컨벤션을 따라 모든걸 가져오는 방법을 택할 수 있다.

3. 모든걸 스타일드 컴포넌트화 할 수 있고,

const Section = styled.section`
  border-bottom: 1px solid grey;
  padding: 20px;
`;

const Headline = styled.h1`
  color: red;
`;

const Text = styled.span`
  padding: 10px;
`;

const Content = ({ title, children }) => {
  return (
    <Section>
      <Headline>{title}</Headline>

      <Text>{children}</Text>
    </Section>
  );
};

CSS에 익숙하다면, 아래처럼도 쓸 수 있다.

const Container = styled.section`
  border-bottom: 1px solid grey;
  padding: 20px;

  h1 {
    color: red;
  }

  .text {
    padding: 10px;
  }
`;

const Content = ({ title, children }) => {
  return (
    <Container>
      <h1>{title}</h1>

      <span className="text">{children}</span>
    </Container>
  );
};

4. DOM요소에 직접적으로 넘겨줘선 안되는 props는 $를 앞에 붙여준다

5. margin을 위한 컴포넌트를 만들지않고 Spacer라는 컴포넌트 만들어보기(reference)