Skip to content

Latest commit

 

History

History
141 lines (99 loc) · 3.69 KB

1104.md

File metadata and controls

141 lines (99 loc) · 3.69 KB

2022. 11. 04

버튼 컴포넌트 분리

테스트 폼의 하단 저장하기 버튼을 기준으로 삼아서 버튼 컴포넌트를 분리한다.

1단계 기존 화면에서 특정한 부분을 잘라서, Button.tsx 로 분리했다

import React from "react";

function Button() {
  return (
    <button type="submit" className="bg-yellow-300 p-4 rounded-xl">
      저장하기
    </button>
  );
}

export default Button;

2단계 props로 바뀌는 부분을 받기 - 추출할 때는 변하는 부분과 변하지 않은 부분을 구분해야

import React from "react";

// "string" => string literal type => 원소가 1개인 집합
// string => 모든 가능한 문자열들의 타입 => 원소가 매우 많은 집합!

function Button({
  type,
  children,
}: {
  type: "submit" | "button";
  children: string;
}) {
  return (
    <button type={type} className="bg-yellow-300 p-4 rounded-xl">
      {children}
    </button>
  );
}

export default Button;

3단계 type을 간소화하고, className을 추가할 수 있게 만들기

import React from "react";

type ButtonProps = React.ComponentProps<"button">; // <- 중요!

function Button({ type, children, className }: ButtonProps) {
  return (
    <button type={type} className={"bg-yellow-300 p-4 rounded-xl " + className}>
      {children}
    </button>
  );
}

export default Button;

4단계 polymorphic component (다형적인 컴포넌트)

같은 디자인 시스템 컴포넌트를... 서로 다른 태그로 사용할 수 있게 해줌!

"더 많은 사용례를 지원하려면 더 복잡하거나, 단순하더라도 더 이해하기 어려운 개념이 필요하다"

제네릭은... 타입을 매개변수로 받을 수 있다. C로 뭘 받느냐에 따라서 "button"도 이제 가능하고 "a"도 가능!

스프레드 연산자로 구조분해할당된 매개변수를 받기

스프레드 연산자로 react component에 props를 넘기기

import React from "react";

type ButtonProps<C extends React.ElementType = "button"> =
  React.ComponentProps<C> & {
    as?: C;
    className: string;
    children: React.ReactElement;
  };

function Button<C extends React.ElementType>({
  as,
  className,
  children,
  ...props // as, className, children을 제외한 나머지 props는 props 객체로 받는다
}: ButtonProps<C>) {
  const Component = as || "button";

  return (
    <Component
      className={
        "bg-yellow-300 hover:bg-yellow-400 transition-colors duration-200 p-4 rounded-xl " +
        className
      }
      {...props} // props 객체에 있는 모든 prop을 Component에 넘긴다
    >
      {children}
    </Component>
  );
}

export default Button;

디자인 시스템

만드는 이유

디자인의 통일성!, 공통되는 로직을 재사용해서 생산성도 높이고, 변경 사항도 반영하기 쉽게 만듬(유지보수성)

만드는 방법

상향식 => 그냥 페이지를 만들고 비슷해 보이는 컴포넌트들을 묶어서 추출해나간다 (초기!) 하향식 => 회사 규모도 크고, 아니면 처음부터 체계를 갖추고 싶고, 기존의 베스트 프랙티스나 이해도가 높을 때!

css reset을 하는 이유

  1. 브라우저마다 기본 CSS가 다르기 때문에 아예 CSS를 초기화시켜놓고 처음부터 모두 똑같은 화면을 볼 수 있도록 만든다.

  2. semantic과 시각적 형태는 분리되어야 한다

variant

같은 용도여도 시각적 차이가 있을때는 variant를 만들어 사용할 수 있다.

반응형 UI와 tailwind

"utility class"

css와 다르지 않다! className을 쓰는 게 다를 뿐~

clsx => class네임을 여러 개로 쪼개서 구분해서 관리할 수 있음