
## 들어가기 앞서
프로젝트들을 진행하며 공통 부분은 굉장히 중요한 부분이에요. 프로젝트에 투입이 된다면 구조를 파악하고 다음으로 보게될 부분 중 하나이죠. 이 중 공통 컴포넌트를 살펴보죠. 
잘 만들어진 공통 컴포넌트를 사용한다면 개발을 진행할 때 편리함과 완성도를 높여주는데요. 그러면 한번 확인해보죠.

```caution
환경: react, typeScript, scss
```


### 공통 컴포넌트, 왜 써야할까요?

```ts
// ****.scss
.buttonStyle {
    border: solid 1px red;
}
----------------------------------------------
import styles from './****.scss';

// ButtonA component
export default function ButtonA() {
  return <button className={styles.buttonStyle} />;
}

// ButtonB component
export default function ButtonB() {
  return <button className={styles.buttonStyle} />;
}

// ButtonC component
export default function ButtonC() {
  return <button className={styles.buttonStyle} />;
}
```

위 코드에서 A, B, C 버튼이 각각의 컴포넌트로 나뉘어 있네요. 이렇게 구성하면 유지보수가 어렵고 확장성도 떨어지게 됩니다. 이처럼 `재사용성이 낮은 컴포넌트를 반복해서 만드는 일`은 피해야 하겠죠. 대신 하나의 공통 컴포넌트로 통일하면 더욱 유연한 구조를 만들 수 있습니다.

```list
그럼 공통 컴포넌트를 만들 때 어떤 점들을 고려해야 할까요?
```

이것은 공통 컴포넌트를 개발하는 개발자마다 관점이 다르다고 생각해요. 

첫 째로 구축한 공통 컴포넌트를 여러 곳에서 사용할 수 있게끔 해야겠죠. 혼자만 쓸 것이 아니고 다른 팀원들과도 함께 써야하니 이러한 상황도 고려하는게 좋겠죠.

둘 째로 props에 어떤 데이터를 둘 것 인가요?
만약 제가 이커머스 사이트 프로젝트에서 공통 컴포넌트를 구축하고 있어요. 각각의 버튼의 재사용성과 확장성을 위해 'plus', 'minus', 'order','cart', 'up-arrow', 'down-arrow' 이에 맞는 icon을 넣고 'red', 'default', 'green' 의 테마가 들어있는 theme도 넣을거에요. 버튼의 크기도 다를 수 있지 않나요? 크기에 대한 prop인 size도 넣을게요!

그러면 여기서 물어볼게요. props를 통해 버튼의 다양한 상태를 조절할 수 있지만 해당 props가 유연하다고 생각하시나요? padding, margin 등의 다양한 css를 적용시키기에는 어느정도 한정되어있죠. 만약 정말로 유연한 공통 컴포넌트를 만들고 싶다면 props가 3개가 아닌 5개, 10개 이상도 될 수 있겠죠. 이처럼 모든 상황을 variant로 대응하기는 쉽지 않아요.

```list
제한이 있다면 className을 props로 받으면 안되나요?
```

저는 공통 컴포넌트에 어느 정도 제한이 필요하다고 생각해요.
프로젝트의 디자인 시스템을 유지하면서도 유연함을 제공하려면 기본적인 스타일은 고정하고, 정말 필요한 경우에만 className을 통해 커스터마이징할 수 있게 하는 것이 좋겠죠.

## Button에 대한 공통 컴포넌트를 만들어 봐요.
ButtonA, ButtonB, ButtonC 를 하나로 통합한다면 텅 빈 DOMElement가 되겠죠?

```ts
export const Button = () => {
    return <button />;
};
```

여기서 아이콘, 테마, 크기에 대한 props에 대한 인터페이스를 활용하여 확장성을 높여보죠.

```ts
// Button.types.ts

// 테마
export const Themes = [
    'string',
    'default',
    'default-sub',
] as const;
export type Theme = (typeof Themes)[number];

// 아이콘
export const Icons = [
    'plus',
    'minus',
    'order',
    'cart',
    'up-arrow',
    'down-arrow',
] as const;
export type Icon = (typeof Icons)[number];

// 아이콘 위치
export const IconPosition = ['left', 'right'] as const;
export type IconPosition = (typeof IconPosition)[number];

// 버튼 사이즈
export const Sizes = [
    's',
    'm',
    'l',
] as const;
export type Size = (typeof Sizes)[number];

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    className?: string;
    theme?: Theme;
    icon?: Icon;
    iconPosition?: IconPosition;
    size?: Size;
}
```

이렇게 공통 컴포넌트의 사용자가 요구사항에 따른 적절한 variant을 적용하여 디자인에 적용할 수 있도록 할 수 있죠. 또한 인터페이스의 상속과 rest parameters인 버튼에 대한 DOMElement를 사용하여 확장성 있는 설계를 하였어요. 추가로 classNames 라이브러리를 통해 디자인에 대응도 해보죠.

```ts
import classNames from 'classnames';
import { ButtonProps } from './Button.type';
import styles from './Button.module.scss';

export const Button = ({ 
    className, 
    theme = 'default', 
    icon, 
    iconPosition = `left`, 
    size='m', 
    ...props
}: ButtonProps) => {
    return (
        <button
            className={classNames(styles[`size-${size}`], className)}
            data-theme={theme}
            data-icon={icon}
            icon-position={iconPosition}
            {...props}
        />
    );
}
```

이제 모든 상황에도 대응이 가능하며 본래의 책임이 있는 버튼 UI 컴포넌트가 완성이 되었어요. 여기서 추가로 리액트에서 요소 참조를 위해 사용하는 ref를 위해 forwardRef로 감싸보죠. 이를 통해 경우에 따라 작용할 수 있는 외부에서 특정 DOM 요소에 ref로 접근할 수 있도록 할게요.

```ts
import classNames from 'classnames';
import { forwardRef } from 'react';
import { ButtonProps } from './Button.type';
import styles from './Button.module.scss';

export const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(
	(
		{ onClick, type = 'button', size = 'max', className, disabled, ...props },
		ref
	) => {
		return (
			<button
				ref={ref}
				className={classNames(styles.button, styles[`size-${size}`], className)}
				type={type}
				disabled={disabled}
				onClick={onClick}
				{...props}
			/>
		);
	}
);
```

이제 이 Button 컴포넌트는 UI뿐만 아니라 기능적으로도 유연한, 실용적인 공통 컴포넌트가 되었어요.

## 마지막으로
공통 컴포넌트는 단순히 하나로 묶는 것에서 끝나지 않아요. 어떤 상황에서도 일관성 있게 사용할 수 있어야 하며 필요에 따라 유연하게 확장도 가능해야 합니다. 또 다른 개발자들과의 협업을 고려한 구조도 중요합니다.

잘 만들어진 공통 컴포넌트 하나는 프로젝트 전반의 생산성과 유지보수성을 크게 향상시킬 수 있다는 것을 알려드리고 싶었어요.

유연성과 일관성을 갖춘 실용적인 공통 버튼 컴포넌트 설계 방법

실용성 있는 공통 컴포넌트 만들기 위해서는 어떻게 해야할까요