TypeScript에서 styled-components props 사용하기

const Box1 = styled.div<Props>`
  background-color: red;
  width: 100px;
  height: 100px;
`;

const Box2 = styled.div<Props>`
  background-color: blue;
  width: 100px;
  height: 100px;
`;

위와 같은 Box를 두 개 만들어 화면에 표현하고 싶다.

하지만 코드 내용이 background-color를 제외한 부분이 모두 동일하기 때문에

중복코드 작성을 피하고 싶다.

=> 이 때! props를 활용하면 gooooooooood!

 

Box를 하나만 선언해준 다음

props를 이용해 값을 넘겨주는 방식으로 취하면 중복코드의 걱정이 사라진다.

 

근데 여기서 또다른 에러가 발생한다!

리액트에서는 에러가 발생하지 않지만,

타입스크립트에서는 변수의 타입을 적용해 주어야만 에러없이 실행이 된다.

 

때문에 interface 내에 해당 변수의 타입을 지정해주고

사용하고자 하는 변수에 <Props>를 작성해주면 해결 끝!

 

+ 인터페이스를 사용하지 않고 동일하게 해결을 하고 싶다면

<Props> 자리에 <bgColor: string>을 해주면 된다!

import './App.css';
import styled from 'styled-components';

interface Props{
  bgColor: string;
}
const Father = styled.div`
  display: flex;
`;

const Box = styled.div<Props>`
  background-color: ${(props => props.bgColor)};
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Father>
      <Box bgColor='red'/>
      <Box bgColor='blue'/>
    </Father>
  );
}

export default App;