2월 27일 TIL

확장성 있는 컴포넌트 만들기

• 그간 프로젝트를 진행하면서 공용 컴포넌트를 만들어 왔었지만 항상 확장성에 대해서 많은 고민을 했었다
  • 사실 시간에 쫒기다 보니.. 확장성보단.. 일단구현이 우선이였던것 같기도..
• 이번 프로젝트에선 props를 활용해서 확장성있는 컴포넌트를 구현해보려 한다

Common Button

• TS를 사용중이기 때문에 타입먼저 지정해줬다
  • ButtonHTMLAttributes를 상속받아서 사용했다
    • ButtonHTMLAttributes는 React 컴포넌트의 버튼 요소에 사용할 수 있는 표준 HTML 속성 집합을 정의하는 React의 인터페이스임
    • Spread문법을 사용해서 해당 속성을 전부 HTML Elements에 뿌려줄 수 있음

코드

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  usage: "login" | "signUp" | "write" | "edit";
}

• usage를 지정할때 정해진값만 들어오게 지정했기 때문에 해당값 외에는 들어올 수 없음
• 그래서 해당 타입의 성질을 이용해서 들어오는 값에 맞춰서 스타일링이 변경되게 설정해둠

const CommonButton = styled.button<ButtonProps>`
  display: flex;
  justify-content: center;
  width: ${(props) =>
    props.usage === "login"
      ? "160px"
      : props.usage === "signUp"
      ? "160px"
      : props.usage === "write"
      ? "80px"
      : "80px"};
  height: 41px;
  border-radius: 15px;
  font-size: 18px;
  border: none;
  color: white;
  padding: 10px;
  background-color: ${(props) =>
    props.usage === "login"
      ? "#2D7DF5"
      : props.usage === "signUp"
      ? "#619BF2"
      : props.usage === "write"
      ? "#499FEF"
      : "#4489F1"};
  box-shadow: 1px 1px 1px 1px #7695c34a;
  &:hover {
    background-color: ${(props) =>
      props.usage === "login"
        ? "#2762BC"
        : props.usage === "signUp"
        ? "#477AC8"
        : props.usage === "write"
        ? "#3A88D1"
        : "#3A6EBE"};
  }
`;

실제 함수

export default function EventButton(props: ButtonProps) {
  return (
    <CommonButton {...props}>
      {props.usage === "login"
        ? "로그인"
        : props.usage === "edit"
        ? "수정"
        : props.usage === "signUp"
        ? "회원가입"
        : "작성"}
    </CommonButton>
  );
}