[TIL/React] 2023/09/09

reference: https://baekkyoungjung.medium.com/react로-확장성-있고-재사용성도-있고-가독성도-있으면서-코드를-추가하기도-쉽고-동시에-제거하기-쉬운-코드-컴포넌트-만들기-아토믹-컴파운드-패턴-7912f1b65a40

Introduction 🟢

정육각 프로젝트를 진행하며 ``컴포넌트의 재사용성(혹은 유연성)`에 관해 집중하게 되었다. 크몽의 프론트엔드 리드께서 작성하신 글을 참고하여, 1) 아토믹 디자인 시스템이 `무엇`이며, 2) `왜` 필요하고, 3) 내 프로젝트에는 어떻게 `적용``할 수 있는지, 결론적으로 내가 앞으로 코드를 작성할 때 취해야 할 태도는 무엇인지에 대해 정리하겠다.

1. 아토믹 디자인 시스템 🟡

Atom(원자)은 UI에서 더 이상 나눌 수 없는 가장 작은 범위를 의미한다. Atom 본래의 의미와 동일하다.

따라서 ``아토믹 디자인 시스템`이란, `컴포넌트를 가장 작은 단위로 나누어 그 조각들을 조립해가는 과정`이고, `UI 구축 방법론의 일종``이라고 할 수 있다. 레퍼런스에서 명확히 보여주고 있다.

2. 왜 필요한가 🟡

크몽에서 사용하던 서비스 카드다. "페이지에서 렌더링 되는 모든 서비스 카드의 가격을 없애주세요.", "이 페이지에선 VideoIcon 라벨이 안 보이게 해주세요." 등의 요구사항들이 크몽 FE Team으로 하여금 아토믹 디자인 시스템을 도입하게 만들었다.

한마디로, ``수많을 요구사항을 유연하게 대처하기 위해`` 아토믹 디자인 시스템이 필요해진 것이다.

3. 적용 🟡

정육각의 서비스 카드다. 만약 좌측 상단의 카드(=초신선 돼지 삼겹살 구이용)만을 위한 코드를 작성하면, 다른 요구사항들에 유연하게 대처하지 못하게 된다.

"무항생제 항목에 대해서는 카드 좌측 상단에 '무항생제 표기'를 추가해 주세요.", "품절 항목에 대해서는 'sold out 표기'를 추가해 주세요." 등 여러 가지 상황이 있을 수 있겠다.

하단의 코드에서는 이미지 사이즈와 icon에 대해서는 고려하지 않겠다.

Atom을 모은 CommonCard는 다음과 같이 구성된다.

아토믹 디자인 시스템에 대해서 완벽히 이해했다고 할 수는 없지만, 그래도 기존보다 여러 요구사항을 유연하게 받아들일 수 있는 코드를 작성하게 된 것 같다.

Conclusion 🟢

아토믹 디자인 시스템은 컴포넌트를 가장 작은 단위로 나누어 그 조각들을 조립해가는 UI 구축 방법론 중 하나이다. 디테일한 후속 요구사항에 유연하게 대처하는 것에 그 효용이 있다. 작은 단위의 카드 모델을 만들어 아토믹 디자인 시스템을 적용해 봤다.

어른들은 '뭘 해도 성공할 놈'이라는 표현을 이따금 사용한다. 동시에, 그가 보여주는, 성공을 향한 보편적 가치(ex. 성실함, 청렴함, 겸손함 등)를 높게 평가한다. 아토믹 디자인 시스템을 보편적 가치로 치환한다면, 결국 공통 분모(=기본)가 잘 형성되어야 한다는 뜻이다. 여전히 꼰대의 참견일까? 자 이제 누가 꼰대지? 내일도 파이팅!