styled-components

스타일 컴포넌트는 React 컴포넌트 시스템의 스타일을 지정하기 위해 CSS를 어떻게 개선할 수 있을지 고민한 결과입니다. 단일 사용 사례에 집중함으로써 개발자를 위한 경험은 물론 최종 사용자를 위한 결과물도 최적화할 수 있었습니다.

스타일 컴포넌트는 개발자를 위한 향상된 경험 외에도 다음과 같은 이점을 제공합니다.

• Automatic critical CSS: 스타일드 컴포넌트는 페이지에서 어떤 컴포넌트가 렌더링되는지 추적하고 해당 스타일만 삽입하고 다른 것은 완전히 자동으로 삽입합니다. 코드 분할과 함께 사용하면 사용자가 필요한 최소한의 코드를 로드할 수 있습니다.

• No class name bugs: 스타일 컴포넌트는 스타일에 고유한 클래스 이름을 생성합니다. 중복, 중복 또는 철자 오류에 대해 걱정할 필요가 없습니다.

• Easier deletion of CSS: 코드베이스 어딘가에서 클래스 이름이 사용되었는지 알기 어려울 수 있지만, 스타일드 컴포넌트는 모든 스타일이 특정 컴포넌트에 연결되어 있기 때문에 명확하게 알 수 있습니다. 컴포넌트가 사용되지 않거나(도구가 감지할 수 있는) 삭제되면 해당 스타일도 모두 함께 삭제됩니다.

• Simple dynamic styling: props나 글로벌 테마를 기반으로 컴포넌트의 스타일을 조정하면 수십 개의 클래스를 수동으로 관리할 필요 없이 간단하고 직관적으로 스타일을 적용할 수 있습니다.

• Painless maintenance: 컴포넌트에 영향을 미치는 스타일링을 찾기 위해 여러 파일을 뒤질 필요가 없으므로 코드베이스의 규모에 관계없이 유지 관리가 매우 간편합니다.

• Automatic vendor prefixing: 현재 표준에 맞춰 CSS를 작성하고 나머지는 스타일이 지정된 컴포넌트가 처리하도록 하세요.

개별 컴포넌트에 바인딩만 하면 익숙한 CSS를 계속 작성하면서 이러한 모든 이점을 누릴 수 있습니다.