Component-Driven Development(CDD): 효율적인 UI 개발의 핵심

Component-Driven Development(CDD)란?

Component-Driven Development(CDD)는 UI 개발에서 컴포넌트를 중심으로 개발하는 방식을 말합니다. CDD의 핵심은 UI를 독립적이고 재사용 가능한 단위로 나누고, 각 컴포넌트가 명확한 기능과 책임을 갖도록 개발하는 것입니다. 이를 통해 유지보수와 확장이 쉬운 코드를 만들 수 있습니다.

 

 

CDD와 기존 방식의 차이

 

• 기존 방식: 전통적인 UI 개발 방식에서는 페이지나 화면 단위로 개발이 이루어집니다. 이 방식은 각 페이지가 완성된 이후 수정이 필요할 때, 코드 중복이 많아 재사용성이 떨어지고 유지보수가 어렵습니다.
• CDD 적용 전 (비포):
  CDD를 적용하기 전에는 여러 페이지에서 동일한 버튼을 복사해 사용했을 수 있습니다. 이런 경우 유지보수를 할 때 모든 페이지에서 해당 버튼을 각각 수정해야 합니다.

 

// Page1.jsx
<button className="bg-blue-500 text-white py-2 px-4 rounded">Submit</button>

// Page2.jsx
<button className="bg-blue-500 text-white py-2 px-4 rounded">Submit</button>

 

이 방식은 코드 중복이 많고, 버튼의 스타일이나 기능을 수정할 때 모든 페이지에서 일일이 수정해야 하는 문제가 있습니다.

 

• CDD 적용 후 (애프터):
  CDD를 적용하면 Button 컴포넌트를 만들어 재사용할 수 있습니다. 한 번만 수정하면 전체 페이지에 반영되기 때문에 유지보수 비용이 크게 줄어듭니다.

// components/Button.jsx
import React from 'react';

const Button = ({ children, onClick, type = 'button', className = '' }) => {
  return (
    <button
      type={type}
      onClick={onClick}
      className={`bg-blue-500 text-white py-2 px-4 rounded ${className}`}
    >
      {children}
    </button>
  );
};

export default Button;

// Page1.jsx
import Button from './components/Button';

const Page1 = () => (
  <div>
    <Button onClick={() => console.log('버튼 테스트!')}>Submit</Button>
  </div>
);

// Page2.jsx
import Button from './components/Button';

const Page2 = () => (
  <div>
    <Button onClick={() => console.log('버튼 테스트2!')}>Submit</Button>
  </div>
);

 

비포/애프터 비교

• 비포: 각 페이지에 버튼을 직접 작성 → 코드 중복이 발생하고, 수정할 때마다 모든 페이지를 수정해야 함.
• 애프터: Button 컴포넌트를 만들어 재사용 → 한 번의 수정으로 전체 페이지에 변경 사항이 반영되며, 코드 중복이 줄어듦.

 

CDD의 장점

CDD는 작은 단위로 컴포넌트를 분리함으로써 복잡한 페이지 구조에서도 수정이 용이하고, 코드 중복을 줄일 수 있습니다. 또한 각 컴포넌트는 독립적이기 때문에 테스트가 쉽고, 기능의 확장이 용이합니다.

 

CDD를 실제 프로젝트에 적용한 경험

• 적용 사례: 제가 참여한 프로젝트에서 CDD를 적용한 이유는 초기 개발 단계에서 공통 컴포넌트를 정의하지 않고 개발을 진행했기 때문입니다. 그 결과, 특정 개발자가 자리를 비우면 작성한 코드를 분석하는 데 시간이 많이 소요되는 문제가 발생했습니다. 이러한 비효율성을 해결하기 위해 CDD를 도입하게 되었습니다. 특히, 내 정보 페이지와 작업 페이지에서 CDD의 적용이 큰 도움이 되었습니다.
• 공통 컴포넌트 설계: 프로젝트 진행 중 Input, Button, SelectBox, Modal 등 10여 개의 공통 컴포넌트를 설계하고 구현했습니다. 이 컴포넌트들은 각각 독립적인 역할을 수행하며, 다양한 페이지에서 재사용될 수 있도록 설계되었습니다.
• CDD 적용 효과: 이러한 공통 컴포넌트들은 프로젝트 전반에서 반복적으로 사용되었고, 이를 통해 개발 속도가 크게 향상되었습니다. 또한 코드의 일관성을 유지할 수 있었으며, 새로운 기능을 추가할 때 기존 컴포넌트를 재사용함으로써 유지보수 비용도 절감할 수 있었습니다.
• CSS와 Tailwind 적용: Tailwind CSS를 컴포넌트 기반으로 적용함으로써 스타일의 일관성을 유지하면서도 UI를 빠르게 조정할 수 있었습니다. CDD와 Tailwind의 결합은 빠르고 효율적인 UI 개발을 가능하게 해주었습니다.

 

CDD 적용 시 고려할 점

• 컴포넌트 설계의 중요성: 너무 작은 단위로 분리하면 관리가 복잡해질 수 있고, 반대로 너무 큰 단위로 나누면 컴포넌트의 재사용성이 떨어질 수 있습니다. 각 컴포넌트가 명확한 책임을 가지도록 적절한 크기로 나누는 것이 중요합니다.
• 스토리북(Storybook) 활용: CDD에서는 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 도구로 스토리북을 사용하는 것이 매우 유용합니다. 이를 통해 컴포넌트의 상태와 동작을 시각적으로 확인하고, 디자인과 기능을 쉽게 테스트할 수 있습니다.

 

느낀 점

• CDD를 통해 얻은 경험: 프로젝트에서 CDD를 적용한 결과, 코드의 재사용성과 유지보수성이 크게 향상되었습니다. 컴포넌트 단위로 UI를 관리하다 보니 팀원 간 협업도 원활해졌고, 기능 추가 및 수정 작업도 빠르고 정확하게 진행할 수 있었습니다.
• 미래 적용 계획: 앞으로도 다양한 프로젝트에서 CDD를 적극 활용할 계획이며, 이를 통해 더 나은 개발 환경과 사용자 경험을 제공할 수 있을 것으로 기대합니다.

CDD는 UI 개발을 더 체계적이고 효율적으로 만들어줍니다. 특히 유지보수성과 재사용성을 높이는 데 큰 장점이 있으니, 앞으로 더 많은 프로젝트에서 이 방식을 도입하는 것이 좋아보입니다.