안녕하신가 난 프론트엔드 개발조무사 하상원이다 ~
회사에서 아토믹 디자인 패턴을 이용한 개발을 하고 있다 후후
과연 아토믹 디자인이 뭘까 ?
아토믹 디자인이란, 아토믹하게 디자인 하는 것이다 !..
혹은 내가 이해한 바는 UI를 나누는 방법 같은 느낌이다.
page(Next라 페이지는 따로), templates, organisms, molecules, atom
이렇게 조각조각 쪼개서 UI를 구성하는 것이다 !
나는 UI를 위의 사진처럼
page는 가장 크고, - 링크 단위
templates은 한 페이지를 구성하며, - 한 화면 단위
organisms은 템플릿을 크게 분리하고, - 화면의 큰 요소들
molecules는 한 가지 목적을 가지며, - 특정 모달창, 리스트
atom는 최소의 기능을 단위로 나누었다 ! - 버튼, 아이콘 등
뭐 이게 맞는지는 아직 정확히 모르겠다.
하지만 확실히 나누고 있다는 느낌은 든다.
아토믹 디자인의 장점은 재활용성의 극대화기 때문에,
여러번 사용하는 컴포넌트들을 아주 ~ 잘 만들어야 한다.
atom 컴포넌트의 가변할 수 있는 값을 고정값으로 넣을 생각따위는 하지 마라 !
최대한 props로 받아서 이용하면 여러 곳에서 사용할 수 있다 !
어차피 재사용하게되면 바꾸고 싶어서 안달이 날 것이다.
내가 느끼기엔 아주 사소한 라이브러리를 만드는 듯한 느낌이다.
myDatePicker라는 달력을 샤샤샥 코드로 만들고
<myDatePicker handler={handler} isOpen={isOpen} date={defalutDate} style={"top:50"} />
막 이렇게 선언하는 느낌이다 !
이거 외에도 UI단의 로직만 남겨두고 데이터 파싱이나 그런 것들은 useApi로 빼서 불러와서 사용했다.
혹시 이게 커스텀 훅일까 ? 다음에 공부해봐야겠다.
하여튼 이렇게 하고 각 컴포넌트에서 실행하는 함수들도 최대한 값을 전달하기보단,
Callback 함수를 만들어서 template단에서 처리했다.
언젠가 재활용이 필요할 때에, 아마 바로 사용할 수는 없더라도(코딩 실력 이슈),
수월하게 바꿀 수 있을 것이란 희망을 가지고 있다 !
이외에도 아토믹 디자인은 유지보수가 용이하다는 장점을 가지고 있다.
쪼개서 독립적으로 만들다보니,
하위 컴포넌트의 기능을 수정해도 상위 컴포넌트가 막 박살 날 일이 사라지는 것이다!
하지만 그만큼 컴포넌트가 많아져서 다른 의미로 유지보수가 어려워지기도 한다.
뭐 이외에도 다양한 장점과 단점이 있겠지만, 지금 당장 내가 느끼는 바는 끝이다 !
그리고 재활용에 대해서 검색하다보니 멋있는 말을 찾았다.
소프트웨어 개발의 3대 천왕 중 하나, DRY 원칙 - “반복하지 마라(Don't Repeat Yourself)”
알겠나?
알았다면,
반복하지 마라.
" Do Not Fuckin Repeat Yourself. "
댓글