들어가며

다들 컴포넌트의 필요성과 분리 방법에 대해 너무 잘 설명해주셔서 나는 컴포넌트에 대해서는 가볍게 알아보고, 디자인 시스템 방법론인 아토믹 디자인에 대해서 소개해보려고 한다.

컴포넌트란?

리액트 공식문서

Components와 Props

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.

···

개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.

‘props를 전달받아 UI 를 그려주는 재사용 가능한 조각’ 이라고 설명하고 있다.

컴포넌트의 장점

재사용성

const Button =({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
}

<Button onClick={로그인하는 함수}>로그인!</Button>
<Button onClick={회원가입하는 함수}>회원가입!</Button>
<Button onClick={등록하는 함수}>등록!</Button>
<Button onClick={삭제하는 함수}>삭제!</Button>

텍스트와 동작만 다른 똑같은 디자인의 버튼이 여러개 있다면, 그 버튼을 모두 따로따로 작성하기 보단, 위와 같이 컴포넌트를 만들어두고 텍스트와 클릭함수만 바꿔가며 다시 사용할 수 있다.

개발자는 반복을 싫어한다

유지보수성

재사용성과도 연결되는 내용이다. 만약 버튼의 변경사항이 생긴다면? (가령 색이나 크기 등 스타일에 관련된 것일 수도 있고, 컴포넌트 종류에 따라 동작방식 등이 바뀔 수도 있다.)

컴포넌트를 사용하고 있다면, 그 컴포넌트만 수정하면 된다.

하지만 컴포넌트 없이 그냥 여기저기에 코딩해뒀다면? 일일이 찾아가서 수정해야한다. 찾는 것 부터 쉽지 않은 일이고 바꾸는 과정에서 오타가 날 수도, 빼먹은 부분이 생길 수 도 있다.

복잡성 감소

내용과 기능이 많아지다보면 UI 들이 서로 상호작용하고 서로서로 연결된다.

하지만 개발이 진행될 수록 내용이 많아지고 코드가 복잡해진다. 내용이 많아져 코드가 복잡해진 다는 것은 조건문이 많아지고 분기가 많아지고 수행하는 동작이 많아진다는 뜻이다.

각자의 역할만 하도록 컴포넌트를 단순화해서 분리하면 이런 문제를 해결할 수 있다. 이를 SRP(단일 책임 원칙)이라고 한다.

가독성

컴포넌트는 일종의 추상화를 제공한다. 예를 들어 메인페이지의 index.tsx 파일을 열었더니 다음과 같다.

const Index = () => {
  return (
    <MainLayout>
      <Header/>
      <Content/>
      <Footer/>
    </MainLayout>
  );
};

export default Index;

어떤 프로젝트인지도 모르고, 누가 작성한 코드인지도 모르지만 보자마자

“아 메인 레이아웃안에 헤더, 컨텐츠, 푸터가 있구나” 를 알 수 있다.

그리고 헤더가 궁금하다면 헤더 컴포넌트에 들어가서 헤더 코드를 자세히 볼 수도 있다. 이때 내가 보고있는게 ‘헤더’의 코드라는 것을 인지하고 코드를 보는건 코드를 이해하는 데 생각보다 도움이 많이 된다.

테스트 용이성

테스트를 진행할 때 가장 먼저 유닛테스트(단위테스트)를 많이 진행한다.

컴포넌트 단위로 테스트를 진행하면 유닛테스트를 아주 쉽게 할 수 있다.

컴포넌트 별로 제작 후 테스트까지 해둔다면 페이지에서 컴포넌트들을 조립했을 때, 스타일적인 문제, 함수 동작의 문제 모두 크게 줄어든다.

디자인 시스템

그래서 컴포넌트를 어떻게 설계하라는 걸까?

어떤 기준으로 컴포넌트를 나눠야할까?

물론 컴포넌트를 설계하는 방법은 다양하다. 디자인 시스템을 활용해서 컴포넌트 설계할 수 있는데, 이 아티클에서는 여러가지 방법중 “아토믹 디자인”에 대해서 소개해보려 한다.

디자인시스템? 아토믹 시스템?

brad frost에 따르면 디자인 시스템은 어떤 조직이 디지털 인터페이스를 디자인하고 구축하는 방식에 대한 이야기라고 말합니다. 디자인 시스템은 여러가지 하위 시스템을 포함하는데, UI 컴포넌트와 variants, 타이포그래피 시스템, 컬러 팔레트 시스템, 레이아웃 / 그리드 시스템 등이 있습니다. 아토믹 디자인은 디자인 시스템을 만드는 방법론입니다. brad frost의 디자인 시스템 이야기에 관심이 있으시다면 design systems are for user interface 글을 추천드립니다.

아토믹 디자인(Atomic Design)

brad frost의 아토믹 디자인 은 화학적 관점에서 영감을 얻은 디자인 시스템이다. 화학적 개념에서 모든 것은 atom(원자)으로 구성되어있고 atom(원자)들이 서로 결합하여 molecule(분자)이 되고, molecule는 더 복잡한 organism(유기체)으로 결합하여 궁극적으로 모든 물질을 생성한다.

아토믹 디자인에서는 이 개념을 차용해서 컴포넌트를 atom, molecule, organism, template, page의 5가지 레벨로 나눈다.

각각을 살펴보기 전에 알아야 할 점이 하나 있는데,

아토믹 디자인은 선형(linear) 프로세스가 아니라 UI를 응집력 있는 전체이자 동시에 부분의 집합으로 생각하는 데 도움이 되는 정신적 모델이라는 것이다.

이 내용은 마지막에 다시 설명하도록 하겠다.

Atom

원자

아톰은 원자의 개념과 같이 더 이상 분해될 수 없는 컴포넌트를 의미한다. label, input, button 과 같은 기본 HTML Element 가 포함된다.

Atom은 페이지에서 그 자체로 사용되지는 못하는 경우도 있고, 또 다른 Atom, Molecule 등과 결합되어 사용될 수 있다.

Molecule

분자

하나의 단위로 함께 동작하는 상대적으로 단순한 UI 그룹이라고 할 수 있다.

label, input, button 원자들을 조합하여 SeachForm 을 만들 수 있다. 이 SeachForm 은 검색기능이 필요한 곳 어디서든 가져다 쓰고 재사용 할 수 있는 요소가 되었다.

보통 Molecule은 1가지 일만 하도록 제작하는데, 이는 위에서 살펴본 컴포넌트의 특징중 자기 책임만을 다하며 복잡성을 낮추는 것(SRP, 단일 책임 원칙)을 달성하는데 도움이 된다.

Organism

유기체Organism은 Atom(들), Molecule(들), 다른 Organism(들)이 결합되어 만들어지는 복잡한 UI 요소이다.

이러한 Organism은 화면에서의 개별 영역을 형성하고, 컨텍스트를 갖는다.

위의 예시를 보았을 때, logo(atom), navigation(molecule), search form(molecule) 가 모여 Header를 구성하고 있다. 당연하게도 더 구체적이고 컨텍스트를 가지기 때문에 재사용성은 떨어진다.

Template

지금까지는 ‘원자 → 분자 → 유기체’ 로 화학 개념에 비유해서 설명했지만 이제부터는 화학에서 벗어난다.

템플릿은 구성 요소를 레이아웃에 배치하고 디자인의 기본 콘텐츠 구조를 명확하게 표현하는 Page 수준 개체로, ‘와이어 프레임’, ‘Page의 스켈레톤’, ‘페이지의 뼈대’ 라고 할 수 있다. (실제 컨텐츠가 포함되지 않는다)

Page

드디어 마지막 단계. 페이지

Page는 유저가 볼 수 있는 모든 컨텐츠를 담고있다.

객체 개념을 빌려서 설명하자면 Template의 인스턴스라고 할 수 있다.

아토믹 디자인의 구성요소에 대해 모두 알아봤다.

위에서 말했듯 주의할 점은 아토믹 디자인은 선형(linear) 프로세스가 아니라는 것에 주의해야 한다. Atom → Molecule → Organism → Template → Page 로 단계별로 나아가는게 아니다. 대신, 아토믹 디자인 단계를 최종 UI와 기본 디자인 시스템을 동시에 생성할 수 있는 멘탈 모델로 생각해야한다 .

결론

아토믹 디자인은 컴포넌트 설계에 강력한 방법론을 제공하며, 이를 통해 재사용 가능한 UI 구성 요소를 체계적으로 구축할 수 있다. 또한 아토믹 디자인의 가장 큰 장점은 UI를 여러 수준으로 분리하여 복잡성을 줄이고, 재사용성과 유지보수성을 높일 수 있다는 점이다.

그러나 아토믹 디자인만으로 컴포넌트를 완벽하게 설계할 수 있는 것은 아니다. 이는 컴포넌트 설계에 대한 방향성을 제공할 뿐, 실제로 어떻게 적용할지는 팀의 필요와 프로젝트의 특성에 따라 달라진다.

결국, 아토믹 디자인은 완벽한 솔루션이 아니라, 컴포넌트 설계를 위한 멘탈 모델과 가이드라인을 제공하는 도구이다.

그러므로 좋은 컴포넌트 설계를 위해선 아토믹 디자인 뿐만 아니라 다양한 디자인 시스템과 컴포넌트 설계 방법을 시험해 보고, 팀에 맞는 최적의 컴포넌트 구조를 찾아가는 것이 중요하다.

출처

https://velog.io/@skyoffly/개발-지식-React.js에서-컴포넌트를-분리하는-것

https://medium.com/@junep/프론트엔드-아키텍처-컴포넌트를-분리하는-기준과-방법-e7cf16bb157a

https://atomicdesign.bradfrost.com/chapter-2/

https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/