[React] Atomic Design

이른바 Atomic Design

Atomic Design은 시스템을 설계하는 기법입니다.
디자인 시스템은 개념적인 것으로 간단하게 말하면 시스템 내의 디자인을 일치성을 가지도록 하는 시스템이다.
React Application이라면 먼저 MUI로 자신을 멋있게 만들어 보세요!이런 느낌.
Atomic Design는 층별로 설계 시스템을 구축하는 구조로 기본적으로 다음과 같이 구성된다.
Atoms - Molecules - Organisms - Templates - Pages
'등급'을 물으면 아톰스부터 순서대로 만들어진 것 같지만 실제로는 평행으로 일한다.
다양한 곳에서 논의했는데 답이 없을 수도 있지만 다음은 자신의 기준이다.
각 계층의 이름은 다음과 같습니다사이트 축소판 그림.
Atoms - Molecules - Organisms - Ecosystems - Environments

Atoms

화면 표시 요소의 최소 단위로
버튼과 아이콘 등.아이콘과 태그의 조합도 Atoms

로 분류됩니다.

기능이 있는 단일 부품 정의

축소 MUI의 경우 Pick에서 사용할 수 있는 Proops

Molecules

Atoms의 조합

입도가 흐려지기 쉬우므로 개인은 Molecules

가 필요하지 않습니다.

Organisms

화면 표시의 기능 단위로
Zenn의 Top Page에서 "Tech"일람표를 표시하는Component는 여기에 있습니다

Ecosystems 패키지에서 필요한 값은 Proops로 수신

콤보 Atoms, Molecules

일부 상황에서는 Ecosystems

도 포함됩니다.

e.g. DataTable.tsx

Ecosystems

Organisms에 값 및 논리 제공

API 호출 또는 (Redux의 경우) Store의 값을 가져옵니다

.

e.g. DogTable.tsx

Environments

Routing 책임

화면 마이그레이션의 단위

기본 조합 Ecosystems

"**View.tsx", "*Page.tsx"등의 접미사를 정렬

e.g. DogDetailView.tsx

설치 예

Atoms에 대한 정의를 통해 기능의 실현을 한정하는 예.
React(Type script, MUI)를 가정합니다.

Atoms

buttons, icons, inputs, labels, contaains처럼 하위 디렉터리를 만들고 파일 1 구성 요소로 만듭니다.
button 등 기본적인 것을 만들어 이를 바탕으로 필요한 button을 실시한다.
예를 들어 기본 기본 기본 버튼을, 기본 버튼을, 기본 버튼을, 오크 버튼을.
BaseButton.tsx

import React from 'react';
import Button, { ButtonProps } from '@mui/material/Button';

export type BaseButtonProps = Pick<ButtonProps, 'onClick'> & {
  buttonLabel: string;
};

export const BaseButton: React.FC<BaseButtonProps> = (props) => {
  return (
    <Button
      variant="contained"
      onClick={props.onClick}
    >
      {props.buttonLabel}
    </Button>
  )
};

OkButton.tsx

import React from 'react';
import BaseButton, { BaseButtonProps } from '~/views/atoms/buttons/BaseButton';

export type OkButtonProps = {
  onOkButtonClick: BaseButtonProps['onClick'];
};

export const OkButton: React.FC<OkButtonProps> = (props) => {
  return (
    <BaseButton
      onClick={props.onOkButtonClick}
    >
      OK
    </BaseButton>
  )
};

스타일드-component로 Buton spacing을 주는 것도 좋다.
SpacingButton.tsx

import Button, { ButtonProps } from '@mui/material/Button';
import { spacing, SpacingProps } from '@mui/system';
import styled from 'styled-components';

export type SpacingButtonProps = SpacingProps & ButtonProps;

export const SpacingButton = styled(Button)`
  ${spacing}
`;

연관성
https://zenn.dev/kosukek/articles/5972bcb65c4d3d