[styled-components] props 사용법 총정리!!

A.  사용할 Button 컴포넌트 생성

// Button/index.jsx
import * as S from "./button.style.js";

export const Button = ({ children, ...props }) => {
  return (
    <S.Button {...props}>
      {children}
    </S.Button>
  );
};


// Button/button.style.js

interface ButtonProps {
  width?: string;
  size?: string;
  color: string;
}

export const Button = styled.button<ButtonProps>`
  display: flex;
  width: ${(props) => (props.width ? props.width : "auto")};
  align-items: center;
  justify-content: center;
  gap: 5px;
  ${(props) =>
    props.size === "sm" &&
    css`
      height: 24px;
      padding: 0 10px;
      font-size: 1.1rem;
    `}

  &:hover {
    background: ${(props) =>
      props.color === "clear"
        ? props.theme.colors.darkHover
        : props.theme.colors.whiteHover;
  }

`;

 

A 에서 만든 버튼 컴포넌트를 Main 컴포넌트에서 사용

import { Button } from "../Button/index.js";

export const Main = () => {
  return (
    <Button
      width="90px"
      size="sm"
      color="clear"
    >
      버튼입니다
    </Button>
  );
};

 

props 논리(이동 순서) [  styled-components 가 익숙하지 않은 분들을 위한 props이동 설명 ]

1.Button props 입력

width= "90px", size="sm" 과 같은 것들이 전부 props라고 보면된다.

 // Button 컴포넌트의props로width,size,color을 넘기고 있다.
 <Button
      width="90px"
      size="sm"
      color="clear"
    >
      버튼입니다
    </Button>

 

2. props 전달받음

A의 Button 컴포넌트에 props들이 전달되어 ...props를 통해 값을 넘기고 있다.

{ width, size, color  } = props 위에서 넘겨준 값들이 props 안에 이와 같이 들어있다고 생각하면된다.

export const Button = ({ children, ...props }) => {
  return (
    <S.Button {...props}>
      {children}
    </S.Button>
  );
};

 

3. styled-components에서 

아래와 같은 구문으로 button.style.js의 Button에 props들이 전달되게 된다.

 <S.Button {...props}>

 

4. 아래와 같이

{ (props) => (props.width ? props.width : "auto") }

전달된 props에서 값을 꺼내어 조건문에따라 css를 다르게 적용할 수 있다.

export const Button = styled.button<ButtonProps>`
  display: flex;
  width: ${(props) => (props.width ? props.width : "auto")};
  align-items: center;
  justify-content: center;
  gap: 5px;
  ${(props) =>
    props.size === "sm" &&
    css`
      height: 24px;
      padding: 0 10px;
      font-size: 1.1rem;
    `}

  &:hover {
    background: ${(props) =>
      props.color === "clear"
        ? props.theme.colors.darkHover
        : props.theme.colors.whiteHover;
  }

`;