[AI 감성 일기장] TypeScript로 재사용 가능한 공용 컴포넌트 구현

이전에 만들었던 리액트 프로젝트 Emotion Diary를 마이그레이션하면서, 기존에 자바스크립트로 작성된 공용 컴포넌트들을 타입스크립트로 재작성했다.

 

기존 프로젝트에서 이미 Button과 Header 같은 재사용 가능한 컴포넌트를 구현해두었지만, 타입 안정성이 부족했다. 타입스크립트를 도입하면서 props의 타입을 명확히 정의하고, 컴파일 타임에 오류를 잡을 수 있도록 개선했다.

Button 컴포넌트

props 타입 정의

text, type, onClick 세 가지 props의 타입을 명시적으로 정의했다.

type ButtonProps = {
  text: string;
  type: "DEFAULT" | "POSITIVE" | "NEGATIVE";
  onClick: () => void;
};

export default function Button({text, type, onClick}: ButtonProps) {
  // ...
}

 

타입별 스타일 분기

버튼의 용도에 따라 DEFAULT, POSITIVE, NEGATIVE 세 가지 타입을 정의하고, 각각 다른 배경색을 적용했다.

const btnColor =
  type === "DEFAULT"
    ? "bg-btnLight"
    : type === "POSITIVE"
    ? "bg-green text-white"
    : type === "NEGATIVE"
    ? "bg-red text-white"
    : "";

return (
  <button
    className={`${btnColor} rounded-md py-2 px-5 whitespace-nowrap`}
    onClick={onClick}
  >
    {text}
  </button>
);

 

defaultProps 설정

props가 제공되지 않을 경우를 대비해 기본값을 설정했다.

Button.defaultProps = {
  type: "DEFAULT",
};

 

사용 예시

<Button
  text={"default"}
  onClick={() => console.log("디폴트 버튼 클릭")}
/>

<Button
  text={"positive"}
  type={"POSITIVE"}
  onClick={() => console.log("파지티브 버튼 클릭")}
/>

<Button
  text={"negetive"}
  type={"NEGATIVE"}
  onClick={() => console.log("네거티브 버튼 클릭")}
/>

 

Header 컴포넌트

props 타입 정의

title, leftChild, rightChild 세 가지 props의 타입을 명시적으로 정의했다.

type HeaderProps = {
  title: string;
  leftChild: React.ReactNode;
  rightChild: React.ReactNode;
};

 

레이아웃 구조

Tailwind CSS의 Flexbox를 활용해 3등분 레이아웃을 구성했다.

return (
  <header className="flex items-center py-5 border-b border-lineLight">
    <div className="flex w-1/4 justify-start">{leftChild}</div>
    <div className="flex w-1/2 justify-center">{title}</div>
    <div className="flex w-1/4 justify-end">{rightChild}</div>
  </header>
);

 

사용 예시

<Header
  leftChild={<Button text={"<"} onClick={() => console.log("이전")} />}
  title={"타이틀"}
  rightChild={<Button text={">"} onClick={() => console.log("다음")} />}
/>