[React] 공통컴포넌트를 통해 버튼을 재사용성 있게 만들어보기

1. 어디서든 사용할 수 있는 버튼을 만들기

회사에서 프로젝트를 하는데 버튼이 비슷한 것이 여기저기 있었다.

어떤 버튼은 opacity가 100%에서 50% 왔다갔다 하는 것도 있고 토글버튼이 있고 등등 여러가지 기능을 하는 버튼이 존재했다.

이 버튼을 공통된 컴포넌트를 통해서 하나의 버튼으로만 만들어 봐야겠다.

2. 버튼 컴포넌트 만들기

// button.tsx

const Button = () => {
 return (
   <div>
   		<button>버튼</button>
   </div>
}
export default Button

기본으로 버튼을 만들어주는 컴포넌트를 만들었다.

3. 기본 버튼 CSS

// button.tsx
import styled from "styled-components"

const ButtonWrapper = styled.div`
	height : 42px
`
const StyledButton = sytled.button`
~~~~
`

const Button = () => {
 return (
   <ButtonWrapper>
   		<StyledButton>버튼</StyledButton>
   </ButtonWrapper>
}
export default Button

기본 버튼 CSS준비가 끝났다.

이제 상위 컴포넌트에서 props로 넘길 것을 확인하면 된다.

4. 상위 컴포넌트에서 필요한 기능 css를 props로 넘겨주기

// components.tsx

import Button from "경로"

const Components = () => {
  const onClick = () => {
   ~~~ 
  }
    
  return (
  <div>
    <Button type = {"submit"} 
    addStyle={{
      opacity : `50%`,
	  backgroundColor : "red",
      border : "1px solid black"
 	}}
	contents = {"로그인"}
	onClick = {onClick}
/>
  </div>
  )
}
export default Componetns

내가 넘기고 싶은 것들은 type, addStyle, contents이다
type의 경우는 버튼의 타입 지정(button, submit)
addStyle의 경우는 CSS스타일을
contents의 경우는 버튼에 무슨 내용을 넣을지(text)
onClick의 경우 클릭시 무슨 이벤트를 발생할지
이다.

5. props로 넘어온 값 활용하기

// button.tsx
import styled, {css} from "styled-components"

interface IProps {
	type: string;
    addStyle?: {
      opacity: string;
      backgroundColor: string;
      color: string;
      border: string;
    };
    contents: string;
    onClick?: () => void;
}

const ButtonWrapper = styled.div`
	height : 42px
`
const StyledButton = sytled.button<any>`
${(props) => {
    return css`
      background-color: ${props.addStyle.backgroundColor};
      opacity: ${props.addStyle.opacity};
      color: ${props.addStyle.color};
      border: ${props.addStyle.border};
    `;
  }}
`

const Button = (props : IProps) => {
  const {type, addStyle={}, contents, onClick} = props
 return (
   <ButtonWrapper>
   		<StyledButton 
   			type={type},
      		addStyle={addStyle}
			onClick={onClick}>{contents}
		</StyledButton>
   </ButtonWrapper>
}
export default Button

여기서 바뀐 점은 styled컴포넌트에 props로 넘긴 점과 타입을 지정해준 것이다.

타입을 지정하지 않았을 경우 오버로드를 불러올 수 없다는 에러가 나게 된다.
(일단 잘 몰라서 any...)

styled-components에 props를 넘겨주고 return css를 통해 css값들을 return하게 된다.

이를 응용해서 width, height등 전부 지정가능하게 만들어 버튼 만들시 다용도로 만들 수 있을 듯 하다.