button 공통컴포넌트 만들기

회사에서 새로운 프로젝트를 들어가면서 완전 초기셋팅부터 다시 시작하게 되었다! 그러면서 회사 동료 프론트엔드 개발자분과 서로 맡을 파트를 나누게 되었다! 그 중 공통 컴포넌트 부분에서 button 파트를 맡게 되었다!!!!

button 공통 컴포넌트는 생각보다 쉽게 작업을 할 수 있었다!

import * as s from './button.style';
import { IButtonComponent } from './button.type';

export default function ButtonComponent(props: IButtonComponent) {
  const { style, onClickFn, text } = props;
  return (
    <s.Button style={style || {}} onClick={onClickFn || (() => {})}>
      {text}
    </s.Button>
  );
}

코드를 보면 먼저 style 파일에서 emotion을 통해서 꾸머준 css를 불러와서 return 부분에 적어주었다!

여기서 고려해 주어야 하는 부분은 버튼의 text 부분, css 커스텀과 버튼을 눌렀을 때 함수가 실행이 되어야 한다는 점이었다!

text 같은 경우 버튼에 내가 원하는 문구가 들어가야 하기 때문에 props를 통해서 문자열 타입으로 원하는 문구를 넣으면 값이 들어가도록 하였다!

css 커스텀 같은 경우는 button 컴포넌트를 사용을 할 때 객체 형태에 css 인라인 방식을 통해서 props로 넘겨준다!
그리고 button 태그 부분에서 style의 속성을 넣어 주고 props로 넘겨준 style을 속성의 값으로 넣어준다!!

함수같은 경우 실행하기 원하는 함수를 만들어 주고 그 함수를 props로 넘겨준다. 그러면 button 컴포넌트에서 그 함수를 받아서 button 컴포넌트 내부에서 사용할 수 있도록 해준다!

import ButtonComponent from '@components/button/button';

export default function TestPage() { 
  const onClickBtn = () => { console.log("버튼눌림") }

return ( 
  <ButtonComponent 
  	text='버튼' 
  	style={{ height: '10px',  backgroundColor: 'red', }}
	onClickFn={onClickBtn} /> ); 
	>
)

위 내용을 설명한 코드이다!!

button 컴포넌트 같은 경우는 고려해 주어야 하는 상황이 많지 않기 때문에 만든데 어려움을 없었다!