[TIL] 2023.05.28 button 공통 컴포넌트 만들기

여러 페이지에서 공통적으로 사용하는 버튼이 있었는데 코드가 불필요하게 중복되는 느낌이라 컴포넌트 화해서 재사용하기 위해 GlobalButton 컴포넌트를 생성했다.

 

const GlobalButton = ({ width, text, btnType }: StrProps) => {
  return (
    <button
      className={`${width} text-white bg-themePink ... hover:border-solid`}
      type={btnType === 'submit' ? 'submit' : 'button'}
      value="button"
      name="button"
    >
      {text}
    </button>
  );
};

export default GlobalButton;

GlobalButton 컴포넌트를 사용할 때 props로 3가지 요소를 받아야 했는데 버튼의 width와 type, 그리고 버튼 내부 텍스트였다. width를 props로 받아서 tailwind와 결합해야 했는데 이를 위해 className을 {}로 감싼 후 백틱(`)을 추가했다. 버튼 type의 경우 props로 받아 온 btnType을 type에 바로 넣어주면 에러가 발생했기 때문에 삼항연산자를 이용하여 처리했다.

 

<GlobalButton width={'w-[50rem]'} text={'SUBMIT NOW'} btnType={'submit'} />

실제 컴포넌트를 사용할 때는 GlobalButton을 import 한 후 props를 예시와 같이 넘겨주면 된다.