Styled-component에서 props 사용하기

오늘은 Ts 기반 React styled-component에서 props를 사용하는 방법을 알아보자

간단하게 컴포넌트가 오른쪽에 정렬되야하는지 왼쪽에 정렬되야하는지와
배경색을 props로 넘겨서 props에 따라 정렬을 조작해보겠다.

그전에 styled-component를 Ts에서 사용하려면 styled-component의 타입을 정의 받아야한다.

npm i -D @types/styled-components

> 꼭 터미널에서 타입 정의를 받자

Main.tsx

import * as S from "../style/MainStyle";

const Main = () => {
	return (
      <S.MainBox>
      	<S.Box isRight={true} background="red">dd</S.Box>
		<S.Box isRight={false} background="blue">dd</S.Box>
      </S.MainBox>  
    )
}

export default

간단하게 사이즈가 정해진 메인 박스 안에서 각각 오른쪽에 있어야되는 빨간 상자 하나와
왼쪽에 있어야하는 파란 상자 하나를 만들었다.

MainStyle.tsx

타입스크립트로 props를 넘길때 해줘야하는 것이 있는데 바로 interface설정이다.

import styled from "styled-components";

//인터페이스는 꼭 styled-component 위에 쓰자
interface IBox{
	isRight : boolean;
  	background : string;
}

export const MainBox = styled.div`
	width : 20rem;
	height : 20rem;
	background-color : gray;
`

export const Box = styled.nav`
	width : 3rem;
	height : 3rem;
	background-color : ${(props:IBox) => props.background};
	float : ${(props:IBox) => (props.isRight ? "right" : "left")};
`
//props를 넘겨 받을때 뒤에 인터페이스를 쓰는데 무조건 괄호로 감싸야한다

결과

이렇게 잘 적용되는걸 알 수 있다.