styled-components의 생산성

이 경이로운 라이브러리로 프로젝트를 개선하기 위한 두 가지 모범 사례

styled-components는 JavaScript를 통해 애플리케이션을 스타일링하기 위한 라이브러리이며 주로 React 및 React Native 프로젝트의 스타일링에 사용됩니다.

스타일링에 대해 생각할 때 이러한 스타일을 구성하는 방법에 대해서도 생각해야 합니다. 프런트엔드 개발 세계에서 막 시작하는 사람들에게는 다음 두 가지 방법이 좋은 코드를 작성하고 유지 관리하는 데 기본이 됩니다.

고립된 스타일 만들기

Whenever possible, create isolated styles.

이 방법을 통해 구성 요소 스타일에 더 빠르게 액세스할 수 있으며 생산성이 향상되고 스타일을 훨씬 쉽게 유지할 수 있습니다.

시장에서 널리 사용되는 방법은 구성 요소/페이지의 기본 파일(index.js)과 함께 스타일 파일을 만드는 것입니다.

파일 이름을 styles.js 또는 styled.js로 지정하는 것도 좋습니다. 이 두 이름이 많이 사용됩니다.

예를 들어, 이것은 내 GitHub의 React 템플릿에서 사용한 스타일 파일의 구조입니다.

시맨틱 스타일 만들기

styled-components가 잘 알려져 있고 채택되었지만 의미론적 범위를 가져야 하는 많은 그룹화 구성 요소가 단순div으로 생성되는 것을 보는 것이 일반적입니다. 태그를 정확하고 의식적으로 사용하는 것을 잊지 않는 것이 매우 중요합니다.

다음은 styled-component로 스타일이 지정된 구성 요소를 만들고 내보내는 방법의 예입니다.

export const ExampleComponentContainer = styled.div``;

styled.header , styled.nav , styled.section , styled.article , styled.aside , styled.footer ,
무엇보다도.

여기를 클릭하면 위에서 언급한 템플릿에 액세스할 수 있습니다.

코데라모스 / 템플릿-reactjs

이 프로젝트에는 React 프로젝트의 기본 구조가 포함되어 있습니다. babel-plugin-root-import, eslint-plugin-import-helpers, prop-types, react-router-dom, styled-components 등에 대한 설정도 포함되어 있습니다.

이 파일 구조에 대해 어떻게 생각하는지 댓글을 달아주세요 :)