[Week12] React(TypeScript) 기반의 동적 UI 개발(3)

지난 시간에 이어 타입스크립트를 활용한 동적 UI 개발을 진행해 볼게요. 이번 시간에는 화면 구성의 바탕이 되는 기본 컴포넌트들을 작성하고, 공통 레이아웃인 헤더와 푸터를 구현하는 과정을 정리해 볼게요.

기본 컴포넌트 작성 - Title 컴포넌트

제목을 표시하는 공통 컴포넌트예요. 컴포넌트 내부의 텍스트는 children 을 통해 전달받고, 폰트 크기나 테마 같은 스타일 요소는 props 로 받아 재사용성을 높이는 방식으로 구현해요.

import React from "react";

interface TitleProps {
  children: React.ReactNode;
  size?: "large" | "medium" | "small";
}

const Title: React.FC<TitleProps> = ({ children, size = "medium" }) => {
  return <h1 className={`title ${size}`}>{children}</h1>;
};

export default Title;

기본 컴포넌트 작성 - Button 컴포넌트

사용자의 클릭 이벤트를 처리하는 버튼 컴포넌트예요. 기본 HTML 버튼이 가지는 속성들을 타입스크립트의 React.ButtonHTMLAttributes 를 상속받아 그대로 사용할 수 있게 열어두고, 디자인에 필요한 추가 속성만 따로 정의해서 사용해요.

import React from "react";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  variant?: "primary" | "secondary";
}

const Button: React.FC<ButtonProps> = ({ children, variant = "primary", ...props }) => {
  return (
    <button className={`btn ${variant}`} {...props}>
      {children}
    </button>
  );
};

export default Button;

기본 컴포넌트 작성 - Input 컴포넌트

사용자로부터 텍스트를 입력받는 컴포넌트예요. 버튼과 마찬가지로 기본 input 태그의 속성들을 상속받아 확장이 가능하도록 구성하며, 재사용을 위해 스타일을 모듈화하여 관리해요.

import React from "react";

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  placeholder?: string;
}

const Input: React.FC<InputProps> = ({ placeholder, ...props }) => {
  return <input className="input-field" placeholder={placeholder} {...props} />;
};

export default Input;

헤더와 푸터

헤더와 푸터는 웹페이지의 공통적인 레이아웃 요소로, 여러 페이지에서 동일하게 사용하여 사이트 전체의 일관성을 유지하는 역할을 해요.

헤더는 웹페이지 최상단에 위치하며 로고, 네비게이션 바 등을 포함해요. 푸터는 최하단에 위치하며 저작권 정보, 사이트 맵 등의 추가 정보를 제공해요. 일반적으로 이 두 요소는 전역 컴포넌트로 만들고, Layout 컴포넌트 내부에서 공통적으로 감싸서 렌더링하도록 구현해요.

import React from "react";
import Header from "./Header";
import Footer from "./Footer";

interface LayoutProps {
  children: React.ReactNode;
}

function Layout({ children }: LayoutProps) {
  return (
    <div className="flex flex-col min-h-screen">
      <Header />
      <main className="flex-grow">{children}</main>
      <Footer />
    </div>
  );
}

export default Layout;