[11주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 53

1. 왜 기본 컴포넌트부터 만들까?

프로젝트를 시작하면 보통 기능부터 구현하고 싶어집니다. 하지만 아래와 같은 이유로 기본 컴포넌트부터 만드는 것이 훨씬 효율적입니다.

• UI 일관성 유지
• 재사용성 증가
• 스타일 관리 용이
• 협업 시 기준점 역할

즉, 버튼 하나라도 제대로 만들어두면 이후 작업이 훨씬 수월해집니다.

---

2. Button 컴포넌트

버튼은 가장 많이 사용되는 요소입니다. 단순히 클릭 기능만 있는 것이 아니라 다양한 상태를 고려해야 합니다.

고려해야 할 요소

• 기본 / hover / active 상태
• disabled 상태
• size (small / medium / large)
• variant (primary / secondary 등)

interfaceButtonProps {
  children:React.ReactNode;
  onClick?: () =>void;
  disabled?:boolean;
  variant?:'primary'|'secondary';
}

exportconstButton= ({
  children,
  onClick,
  disabled=false,
  variant='primary',
}:ButtonProps) => {
return (
<button
onClick={onClick}
disabled={disabled}
className={`btn${variant}`}
>
      {children}
</button>
  );
};

핵심: 스타일과 로직을 분리하고, 확장 가능하게 설계하기

---

3. Input 컴포넌트

Input은 사용자 입력을 받는 중요한 컴포넌트입니다.

고려 요소

• value / onChange
• placeholder
• 에러 상태
• label / helper text

interfaceInputProps {
  value:string;
  onChange: (e:React.ChangeEvent<HTMLInputElement>) =>void;
  placeholder?:string;
}

exportconstInput= ({ value, onChange, placeholder }:InputProps) => {
return (
<input
value={value}
onChange={onChange}
placeholder={placeholder}
className="input"
/>
  );
};

핵심: 폼 관련 컴포넌트는 확장성을 항상 염두에 두기

---

4. Title (Typography) 컴포넌트

텍스트 스타일을 통일하기 위해 Title 컴포넌트를 분리하는 것도 중요합니다.

interfaceTitleProps {
  children:React.ReactNode;
  level?:1|2|3;
}

exportconstTitle= ({ children, level=1 }:TitleProps) => {
constTag=`h${level}`askeyofJSX.IntrinsicElements;

return<TagclassName={`title-${level}`}>{children}</Tag>;
};

핵심: 디자인 시스템의 시작은 Typography

---

5. Header & Footer 구조

레이아웃의 기본이 되는 헤더와 푸터는 앱 전체 구조를 잡는 역할을 합니다.

exportconstHeader= () => {
return<headerclassName="header">Header 영역</header>;
};

exportconstFooter= () => {
return<footerclassName="footer">Footer 영역</footer>;
};

핵심: 공통 레이아웃은 최상단에서 관리

---

추천 폴더 구조

src/
 ├── components/
 │   ├── common/
 │   │   ├── Button/
 │   │   ├── Input/
 │   │   ├── Title/
 │   ├── layout/
 │   │   ├── Header/
 │   │   ├── Footer/
 ├── pages/
 ├── styles/

common / layout으로 나누면 확장성이 좋아집니다.