컴포넌트 주도 개발(Component-Driven Development)이란?

최근 Storybook에 대해서 학습을 하고 있습니다. Storybook에 대한 기본 개념을 파악하기 위해 Storybook 공식 페이지의 Why Storybook? 부분을 읽던 중 컴포넌트 주도 개발이란 개념에 대해 알게되었습니다. 이번 글에서는 컴포넌트 주도 개발이 무엇이고, 왜 나왔으며, 어떻게 컴포넌트 주도로 개발을 진행할 수 있는 지에 대해서 학습한 내용을 공유하고자 합니다.

 

Storybook

우선 컴포넌트 주도 개발에 자세히 알아보기 전에 Storybook에 대해 알아보겠습니다. Storybook이란 UI 개발을 위한 툴로, 컴포넌트를 테스트하고, 문서화하여 더 안정적이고 효율적으로 웹 개발을 할 수 있도록 도와줍니다. Storybook은 React, Vue.js 등 많은 자바스크립트 UI 프레임워크를 지원하기 때문에, 어떤 프레임워크를 사용하시든 한번 확인 해보시면 좋을 것 같습니다. Storybook에 대한 자세한 내용은 추후에 정리해서 올려보도록 하겠습니다.

 

아무튼 Storybook은 '컴포넌트'를 독립적인 환경에서 테스트하고, 문서화하는 것을 도와줍니다. 즉, 컴포넌트를 만들고, 이를 조립하여 더 큰 컴포넌트를 만들고, 그것들을 또 결합하여 하나의 페이지를 생성하는 방식을 효율적으로 할 수 있도록 도와준다는 것입니다. 방금 말한 컴포넌트를 조립하여 웹 어플리케이션을 만드는 것, 이게 바로 컴포넌트 주도 개발입니다.

왜 컴포넌트를 사용하는가?

왜 컴포넌트를 사용하여 UI를 만드는 걸까요? 아마 우리는 다 이유를 알고 있을 것입니다. 유저 인터페이스는 날이 갈수록 복잡해지고 있습니다. 사람들은 더 완성도 높은, 개인화된 기능을 요구합니다. 그에 따라 개발자들과 디자이너들은 더 많은 로직을 UI에 추가하게 되고, 이는 웹이 커질수록 개발하기 복잡하고, 디버깅도 어려우며, 시간도 오래걸립니다. 따라서 우리는 이런 UI를 컴포넌트라고 하는 작은 모듈들로 쪼개서 안정적이지만 유연한 UI를 만듭니다. 각 컴포넌트가 맡은 역할과 상태를 분리하면 복잡한 UI를 단계별로 접근할 수 있으며, 컴포넌트를 재사용하여 사용할 수 있기 때문입니다.

어떻게 컴포넌트 주도 개발을 하는가?

그렇다면 컴포넌트 주도 개발은 어떻게 이루어지는 걸까요?

1. 한번에 하나의 컴포넌트만 만든다. 각 컴포넌트는 독립적으로 만들며, 컴포넌트가 가지는 각 상태에 대해 정의한다. 가능한 작게 시작한다. (Button, Input 등)
2. 컴포넌트를 결합한다. 작은 컴포넌트를 결합하여 하나의 큰 컴포넌트를 만들고, 새로운 기능을 가능하게 하고 복잡성을 조금씩 증가시킨다.(Form, Table 등)
3. 페이지를 조합한다. 컴포넌트를 결합하여 페이지를 생성한다. mock 데이터로 페이지를 시뮬레이션하여 접근하기 어려운 상태와, edge case에 대해 테스트한다.(Home Page, Profile Page 등)
4. 페이지들을 통합하여 어플리케이션을 생성한다. 이 과정에서 백엔드 API 등 서비스와 연결한다.

 

컴포넌트 주도 개발의 장점

• Quality: 각 컴포넌트를 독립적으로 생성하고, 여러 상태에 대해 정의하므로 UI가 여러 시나리오에서 정상적으로 동작한다는 것을 검증할 수 있습니다.
• Durability: 컴포넌트 레벨에서 테스트가 가능하여 버그를 명확하게 잡아낼 수 있습니다.
• Speed: 컴포넌트를 재사용하여 UI를 더 빠르게 만들 수 있습니다.
• Efficiency: UI를 여러 독립적인 컴포넌트로 분리하여 여러 팀원들이 동시에 작업을 진행할 수 있습니다.

 

마치며

복잡해보였지만, 컴포넌트 주도 개발은 사실 React, Vue.js 등 UI 프레임워크를 사용하는 개발자라면 이미 익숙한 개념일것입니다. 페이지의 여러 부분들을 하나의 컴포넌트로 보고, 이러한 컴포넌트를 결합하여 하나의 페이지를 만들죠. 이는 이러한 프레임워크들이 컴포넌트 주도 개발을 따르기 때문입니다. 그러므로 왜 컴포넌트 주도 개발에 대해 또 정리하며 학습하냐고 할 수도 있을 것 같습니다. 다만 왜 컴포넌트 주도 개발이 왜 나왔는지, 장점이 무엇인지, 어떤식으로 진행이 되어야하는지에 대해 명확히 알고 있으면 Storybook등의 UI 툴의 용도와 활용법을 명확히 이해할 수 있을 것같습니다. 

 

 

레퍼런스

https://storybook.js.org/docs/react/why-storybook

https://www.componentdriven.org/