styled components

장점

1. Automatic critical CSS
   → 사용자가 필요한 최소한의 코드만 로드
2. No class name bugs
   → 스타일별로 고유한 클래스 이름을 생성
3. Easier deletion of CSS
   → 구성 요소에 연결되어 있으므로 명확하게 보여줌으로 파악이 쉬움
4. Simple dynamic styling
   → 간단하고 직관적으로 조정
5. Painless maintenance
   → 유지 관리가 매우 좋음
6. Automatic vendor prefixing
   → styled-components가 나머지 작업을 처리

설치

# with npm
npm install styled-components

# with yarn
yarn add styled-components

Component Name

스타일을 정의할 때 실제로는 스타일이 첨부된 일반 React 컴포넌트를 만드는 것입니다.
식별자의 첫번째 글자는 대문자로 만들어야합니다.

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

Class Name

className

가장 상위의 태그만 styled component로 지정, 하위 태그는 일반 className 사용

혼합

기능에 따라 분리, className - 스타일, styled component - 상태

S-dot

컴포넌트를 다른 파일의 객체로 분리하여 S라는 이름의 객체로 불러옴

예시 컨벤션

최상위 컴포넌트 명

'컴포넌트명'Layout
각 태그들의 컴포넌트 명

div : '컴포넌트명'Box
section : '컴포넌트명'Section
ul : '컴포넌트명'List
li : '컴포넌트명'Item
p : '컴포넌트명'Paragraph
span : '컴포넌트명'Span
컴포넌트들을 묶어주는 컴포넌트 명

'컴포넌트명'Row/Col