본문으로 건너뛰기

23.08.13

오늘 한 일​

  • gloddy 공통 컴포넌트 개발
  • yarn berry 모노레포 구축
  • 정원사들 시즌9 시작

gloddy

polymorphic한 컴포넌트 개발​

객체지향하면 다형성이란 말을 들어봤을 것이다. 관용적인 개념으로는 같은 모양의 코드가 다른 행위를 하는 것이다.

다형성을 영어로 하면 polymorphism이다.
그럼 polymorphic하게 컴포넌트를 개발하는 것은 다양한 형태의 컴포넌트를 개발하는 것이다.

🤔고민 - 버튼 컴포넌트를 어떤 곳에서는 a 태그로, 어떤 곳에서는 button 태그로 사용하고 싶은데..​

그래서 버튼 컴포넌트를 수정하기로 했다.

as prop 추가하기​

제네릭을 사용해서 as prop을 추가했다.

T는 React.ElementType들만 받을 수 있도록 제한했다.

그리고 T의 속성들을 props로 받을 수 있도록 React.HTMLAttributes에 T를 추가했다.

interface ButtonProps<T extends React.ElementType> extends React.HTMLAttributes<T> {
  as?: T;
  // ...
}

버튼 컴포넌트 수정​

ButtonProps에서 추가로 React.ComponentPropsWithoutRef를 사용해서 ref prop을 제외한 나머지 prop들을 받을 수 있도록 했다.

export default function Button<T extends React.ElementType>({
  as,
  // ...
  children,
  ...props
}: StrictPropsWithChildren<ButtonProps<T> & React.ComponentPropsWithoutRef<T>>) {
  const Element = as ?? 'button';

  return (
    <Element
      // ...
      {...props}
    >
      {children}
    </Element>
  );
}

사용 예시​

<Button as="a" href="https://google.com">
  구글로 이동
</Button>

<Button as="button" onClick={() => alert('버튼이 클릭되었습니다.')}>
  버튼
</Button>

yarn berry 모노레포 구축​

yarn berry 모노레포를 구축했다.

Gatsby로 개인 블로그를 만들고, 디자인 시스템도 만들어두어 활용할 계획이다.

추가로 연습하기 위한 프로젝트를 진행할 때에도 사용할 예정이다.

내일 할 일​

  • gloddy 공통 컴포넌트 개발
  • 카공실록 디테일한 부분 수정