스타일 구성 요소 구성

스타일 구성 요소 구성

닫았습니다. 이 질문은의견 기반의현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?이 게시물을 편집하여 사실과 인용문으로 답변할 수 있도록 질문을 업데이트하십시오.

3년 전에 문을 닫았어요

이 질문을 개선하다

앱에 스타일 컴포넌트를 사용하고 싶은데 어떻게 정리하면 좋을지 고민입니다.

기본적으로 스타일 컴포넌트는 재사용성을 위해 특정 컴포넌트에 할당됩니다.

그러나 다른 컴포넌트(애니메이션 컴포넌트 등)에서 여러 번 사용하고 싶은 스타일 컴포넌트는 어떻습니까?이러한 '글로벌' 스타일의 컴포넌트를 보관하고 여러 컴포넌트로 Import할 파일을 작성해야 합니까?

좋은 연습인가요?

스타일링된 컴포넌트로 구축된 대규모 프로덕션 애플리케이션의 대부분은 다음과 같습니다.

src
├── App
│   ├── Header
│   │   ├── Logo.js    
│   │   ├── Title.js   
│   │   ├── Subtitle.js
│   │   └── index.js
│   └── Footer
│       ├── List.js
│       ├── ListItem.js
│       ├── Wrapper.js
│       └── index.js
├── shared
│   ├── Button.js
│   ├── Card.js
│   ├── InfiniteList.js
│   ├── EmojiPicker
│   └── Icons
└── index.js

그App폴더에는 더 큰 응용 프로그램을 구성하는 모든 특정 구성 요소가 포함되어 있습니다.(실제 앱에서 경로별로 구성할 수 있습니다) 이러한 큰 컴포넌트 각각은,index.js파일 및 스타일링된 컴포넌트들을 개별 파일에 저장합니다.

응용 프로그램을 빌드할 때 하나의 큰 컴포넌트에서 다른 큰 컴포넌트에 스타일링된 컴포넌트가 필요하다는 것을 알게 되면 해당 파일을 드래그하여shared/폴더, 모든 Import를 업데이트하면 끝!시간이 지남에 따라shared/모든 컴포넌트를 앱 전체에서 재사용할 수 있는 개량형 패턴 라이브러리가 됩니다.

꽤 흔한 또 다른 방법은,style.js해당 구성 요소의 스타일 구성 요소를 모두 포함하는 구성 요소 폴더의 파일.방해가 되는 파일은 적지만 중복되는 컴포넌트를 공유 폴더로 이동하기가 힘들다는 단점이 있습니다.

저는 개인적으로 첫 번째 버전을 자주 사용하지만, 그건 취향에 따라 다를 수 있습니다.둘 다 시험해 보고 어느 쪽이 더 마음에 드는지 확인해 보세요!

또한 Atomic Design을 사용하여 앱을 구성할 수도 있습니다.이렇게 하면 스타일링된 컴포넌트를 재사용할 수 있습니다.원자 설계 방법에 따라 구성 요소를 원자, 분자, 유기체, 페이지 및 템플릿으로 구성합니다.

아톰

atom은 네이티브 html 태그입니다.예를 들어 입력 요소는 Atom일 수 있습니다.

const Input = props => <input {...props} />

분자

원자의 그룹은 분자입니다.예를 들어 다음과 같습니다.

const Field = ({ label, ...inputProps }) => (
    <Label>
        {label}
        <Input {...inputProps} />
    </Label>
)

유기체

유기체는 원자, 분자 및/또는 다른 유기체의 그룹이다.예를 들어 다음과 같습니다.

const Form = (props) => (
    <form {...props}>
        <Field label="Name" type="text" />
        <Field label="Email" type="email" />
    </form>
)

페이지

페이지는 주로 유기체를 넣는 곳입니다.예를 들어 다음과 같습니다.

const HomePage = () => (
    <PageTemplate header={<Header />}>
        <Form />
    </PageTemplate>
)

템플릿

템플릿은 페이지에 사용되는 레이아웃입니다.예를 들어 다음과 같습니다.

const PageTemplate = ({ header, children }) => (
    <main>
        {header && <div>{header}</div>}
        {children}
    </main>
)

Github 예시

스타일드 성분 통합과 함께 원자 설계 방법론을 사용하는 Github에 React 스타터 프로젝트가 있습니다.링크입니다.

스타일 컴포넌트로 프로젝트를 구성하는 방법은 다음과 같습니다.

src
├── Layout
│   ├── Header
│   │   ├── Logo.jsx    
│   │   ├── styled.js
│   │   ├── container.js
│   │   └── index.js
│   └── LeftPanel
│       ├── LeftPanel.jsx
│       ├── styled.js
│       └── index.js
└── index.js

이유:

• 각 폴더는 하나의 기능입니다.
• 폴더 내의 각 파일에는 책임이 있습니다.
  • .jsx이치노
  • styled.js스타일 컴포넌트입니다.컴포넌트의 외관만 관리합니다.컬러, borderStyles, 컬러, borderStyles.
  • container.js상태 관리를 사용하는 경우 구성 요소를 해당 라이브러리와 연결하는 아티팩트가 있어야 합니다.리덕스
  • index.js관련된 모든 것을 내보냅니다.

이 접근방식의 장점은 다른 CSSinJ 라이브러리를 사용하기로 결정했을 때 변경해야 할 부분이 매우 명확하다는 것입니다.

다른 사람에게도 말이 됐으면 좋겠어요.

건배!

언급URL : https://stackoverflow.com/questions/42987939/styled-components-organization