React로 원자 설계 확장

얼마 전에 Atomic Design에 대해 처음 들었는데 이름이 귀에 쏙쏙 들어오긴 했지만 그것에 대해 연구하는 데 너무 많은 시간을 소비하지 않았고 몇 달 후 사용된 팀에 합류했습니다. 같은 상황, 다시 개념에 대해 듣고, 조금 읽고 기본을 이해했습니다.

이 글에서는 AD(Atomic Design)에 대해 자세히 설명하지는 않겠지만, 이 글post을 살펴보는 것을 추천합니다. AD가 좋은 접근 방법과 이유에 대해 자세히 설명합니다.

위에서 언급한 기사를 읽으면 AD의 다음 부분을 인식해야 하며 디자인 시스템 섹션으로 이동할 수 있습니다. 그렇지 않으면 다음은 AD 개념에 대한 요약입니다.

원자

프로젝트에서 무언가를 가장 작게 표현한 것입니다. 예를 들어 사용자 지정 앵커<a/> .

분자

예를 들어 원자 세트: 레이블과 입력 태그가 함께 있습니다.

유기체

분자 세트, 예: 레이블, 입력 및 버튼 세트인 양식

템플릿

일련의 유기체, 분자 및/또는 원자, 이것은 미래 페이지의 골격이지만 골격으로서만 여기에서 데이터를 사용해서는 안 됩니다.

페이지

템플릿을 사용하지만 데이터와 함께 Redux를 사용하는 경우 Redux Store에서 오는 데이터와 함께 사용할 수 있고, GraphQL을 사용하는 경우 GraphQL에서 오는 데이터와 함께 사용할 수 있습니다.

디자인 시스템

이제 AD에 대해 더 잘 이해했으므로 이를 사용하여 디자인 시스템(DS)을 만드는 방법을 살펴보겠습니다. DS는 응용 프로그램에 필요한 모든 페이지를 생성하기 위해 결합할 수 있는 구성 요소/프레임워크 집합으로 볼 수 있습니다. 예를 들어 Bootstrap에는 모든 페이지를 만드는 데 사용할 수 있는 구성 요소 집합이 있습니다. 그러나 우리는 DS가 부트스트랩보다 더 똑똑하고 확장 가능하기를 원합니다.

React + Redux 애플리케이션을 만들기 전에 DS를 준비할 필요는 없습니다. 기본 구성 요소를 포함할 수 있으며 필요에 따라 확장할 수 있습니다. 물론 생성하려는 페이지의 모든 요소가 있어야 합니다. :)

Twitter 앱을 만든다고 가정해 보겠습니다. 포스트가 너무 커지지 않도록 각각의 샘플을 몇 개 넣을 것입니다.

원자:

텍스트

버튼

분자:

아이콘 + 텍스트

버튼 세트

유기체:

트윗(구성: Text, Icon + Text, Image, Link, IconButton)

트렌드 목록

주형:
Twitter의 프로필 페이지에 있는 게시물 목록에 대한 템플릿을 예로 들어 보겠습니다.

페이지:
데이터가 채워진 템플릿입니다.

그러나 이것이 코드에서 어떻게 보일까요?

폴더 구조는 다음과 같습니다.
(이것은 DS에 있으므로 다른 프로젝트에서 재사용하고 동일한 모양과 느낌을 유지할 수 있습니다.)

원자

분자

유기체

이것은 우리의 프로젝트 구현입니다

템플릿

페이지

템플릿은 주로 단순한 구성 요소인 원자, 분자 및 유기체의 집합으로 정의되지만 다음의 경우에 표시된 체크박스 집합의 경우에 선택된 것처럼 유기체가 일부 상태(내부 상태)를 가져야 하는 경우가 있습니다. 모달이지만 처리하는 상태는 구현에 따라 다릅니다.

// Template example
import React from 'react'

// We import from our Design System package the A-M-O elements that we need for our Template
import { ProfileHeader, LinkList } from 'my-design-system'

// We import from our local project the connected components to be used in this specific project
import { ConnectedPost } from './containers/ConnectedPost'

// This is our ProfileTemplate component definition, has nothing more than the skeleton
const ProfileTemplate = props => (
    < {...props} >
      <ProfileHeader {...profileHeaderProps}/>
      <LinkList {...linkListProps}>
      <ConnectedPost {...postProps}>
    </>
)

export default ProfileTemplate

페이지는 데이터가 있는 템플릿입니다. 즉, Redux Store를 페이지에 연결하고(이 사용 사례에서) 템플릿 내부에 연결된 구성 요소를 가질 수 있으므로 자체 내부 상태를 처리하고 그에 따라 업데이트할 수 있습니다.

// Page example

import React from 'react'
import { connect } from 'react-redux'

import ProfileTemplate from './Templates/ProfileTemplate'

const ProfilePage = props => (
    <ProfileTemplate {...props}/>
)

const mapStateToProps = {
    // our state to props implementation
}

const mapDispatchToProps = {
    // our dispatch to props implementation
}

export default connect(mapStateToProps, mapDispatchToProps)(ProfilePage)

AD 사용의 가장 큰 장점은 앱의 모양과 느낌을 동일하게 만들 수 있고 구성 요소에서 변경한 모든 변경 사항이 다른 프로젝트에 분산되어 개별적으로 업데이트하거나 유지 관리할 필요가 없다는 것입니다. 하나의 프로젝트에서 작동합니다. 모든 프로젝트에서 작동해야 합니다. 그러나 작동하지 않으면 모든 페이지에서 작동하지 않습니다. 다행스럽게도 배포 전에 이 모든 것이 작동하는지 확인하는 도구로 단위 테스트, E2E 및 CI/CD가 있습니다. 새로운 버전.

읽어 주셔서 감사합니다!