[React] Styled-Component 사용해보기 (Props로 재사용 컴포넌트 만들기)

리액트 가즈아~

 

컴포넌트 재사용성을 위해 Styled-Component를 사용해보기로 하였다.

 

사용하기에앞서 설치를 먼저 해주도록하자.

 

본인은 타입스크립트로 개발하였기에 두번째 명령어로 설치하였다.

//타입스크립트 안쓸경우
npm install styled-components

//타입스크립트를 사용할경우
npm install @types/styled-components

 

 

사용하고자 하는 컴포넌트에서 import를 한다음 원하는 html element(div나 span등등,,,)를 지정하여 사용하면 된다.

 

문법은  styled.element`css속성` 이다. 코드로 확인해보자.

//Button.tsx
import styled from "styled-components";

// 타입정의
type ButtonType = {
  width: number;
  height: number;
  padding: number;
  description: string;
};

//타입정의 (타입스크립트 사용안하면 styled.button`css속성` 이렇게 바로사용하면된다.
const ButtonStyle = styled.button<ButtonType>`
  //부모에게서 데이터를 받아서 사용하고 싶을때 사용한다.
  width: ${(props) => props.width + "px;"}
  height: ${(props) => props.height + "px;"}
  padding: ${(props) => props.padding + "px;"}
  //부모에게서 데이터를 받지않아도된다면 아래와같이 props없이 사용한다.
  border:none;
`;

const Button = (props: ButtonType) => {
  con(props);
  return (
    <ButtonStyle
      width={props.width}
      height={props.height}
      padding={props.padding}
      description={props.description}
    >
      {props.description}
    </ButtonStyle>
  );
};

export default Button;

본인은 버튼 width와 height와 padding은 버튼만들때 필수 속성이라 생각하여 해당 기능들을 타입으로 정의해두었다.

이것을 부모 컴포넌트에서 사용하고 싶다면 다음과같이 사용하면된다.

 

먼저 위에서 만들었던 Button 컴포넌트를 사용하고자 하는 컴포넌트에서 import한다.

그다음 Button 컴포넌트에서 타입정의해준 값들을 넣어주면된다.

//main.tsx
import Button from "../../presentational/Button";

export default class Login extends Component {
  render() {
    return (
          <Button
            width={580}
            height={50}
            padding={15}
            description={"로그인"}
          ></Button>
    );
  }
}

만약 Button컴포넌트의 속성을 수정하고 싶다면 아래와 같이 사용하면된다.

//main.tsx

const LoginButton = styled(Button)`
    border:1px solid #ccc
`;

export default class Login extends Component {
  render() {
    return (
          <LoginButton
            width={580}
            height={50}
            padding={15}
            description={"로그인"}
          ></LoginButton>
    );
  }
}

styled(Button) 부분이 Button 컴포넌트에서 정의했던 속성을 그대로 상속받고 border를 추가한 코드이다.

 

props받는 부분을 좀더 유연하게 짤수있을것같은데 고민해봐야겠다. ...rest를 사용하면 prop이 여러개일때

 

일일이 다 적어주지 않아도 된다고한다. 이방법도 고려해서 적용해봐야겠다.