디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식
= 컴포넌트 중심의 디자인 패턴
리액트는 컴포넌트의 재사용성이 매우 중요
→ 중복이 되는 컴포넌트를 공통으로 사용할 수 있도록 빼는 것이 관건
→ 개발 단계 처음부터 재사용성이 용이하며, 여러 개의 컴포넌트들을 모아 또 다른 컴포넌트를 만들 수 있도록(조립) 고민하며 개발하는 것이 중요
예시
버튼과 폼(Input)은 어느 프로젝트든 존재
→ 모든 프로젝트에서 사용 가능한 버튼&폼 컴포넌트 제작
→ 디자인만 바꿈
부트스트랩, Ant, Material UI과의 차이점
실제로 사용할 컴포넌트들만 생성
→ 상대적으로 가벼움
→ 회사의 디자인적인 요소(회사 색깔, 테마 등)를 담아서 컴포넌트들을 개발하게 되면 전사 프로젝트에서 사용 가능
// Button 컴포넌트 // src/components/atoms/button/index.js const Button = ({ type = 'button', children = '' }) => ( <button type={type}>{children}</button>
// Input 컴포넌트 // src/components/atoms/input/index.js const Input = ({ type = 'text', id = '' }) => ( <input type={type} id={id} /> )
// Label 컴포넌트 // src/components/atoms/label/index.js const Label = ({ for = '', children = '' }) => ( <label htmlFor={for}>{children}</label>
// Search Form // src/components/molecules/searchForm/index.js import { Button, Input } from 'atoms' const SearchForm = () => ( <div> <Input /> <Button type={submit}>Search</Button> </div> )
// src/components/molecules/formLabel/index.js import { Label, Input } from 'atoms' const FormLabel = () => ( <div> <Label for="form_test">테스트</Label> <Input id="form_test" /> </div> )
인턴을 진행하면서 차장님께서 아토믹 디자인 디자인 도입에 대해 알려주셨다.
처음에는 진행하기에 무리라고 생각했지만 현재 작은 btn과 그 btn을 클릭하면 나올 모달창을 팀원의 페이지와 나의 2가지 페이지에 도입하는 것을 제작 중이다.
프로젝트가 끝나면 Atomic Design이 잘 성공된 상태이길 바란다. 화이팅! 😊