[FE] React 공통 컴포넌트 만들기 : 예제) 버튼(button)

진행하는 프로젝트의 버튼을 공통컴포넌트로 사용하고 싶어 개발해보았다.

1. 우선 button 의 html 속성을 알아야한다.

 

속성을 확인한 후에 사용할 것만 외부에서 props로 주입해서 사용할 수 있게 만들어준다.

disabled => 해당 버튼이 비활성화됨을 명시

class => css 스타일

onclick => 이벤트 함수

 

그 밖, 

<button> </button>으로 감싸며 입력한 내용을 label로 정의할 예정

 

 

2. React로 Component로 변환

 

props로 받아오는 요소는

label => span 태그로 버튼 내부의 글을 나타냄

styleClass => 적용될 className

disabled => true, false로 활성화 비활성화 조절

onClick => onClick이 일어날 시의 이벤트에 대응

 

import React from 'react';

export default function (props) {
  const { label, styleClass, onClick, disabled} = props;
  return (
    <button className={styleClass} onClick={onClick} disabled={disabled}>
          {label}
    </button>
  );
}

 

3. 다른 컨테이너에서 선언하여 사용

 

import Button from './components/common/Button';
          
<Button 
	label="프론트엔드"
	stylesClass=""
 	onClick={()=> {
		alert('클릭됐다!');
	}}
	disabled={false}
/>

 

결과물

 

스타일링을 안해서 못생겼지만 우선 기능적으로 공통 컴포넌트는 위와 같이 사용하면 된다.