Styled Components에서 Props 사용하기

지난 강의에서 우리는 Styled Components 라이브러리를 사용하여 스타일링된 컴포넌트가 일반 React 컴포넌트처럼 사용될 수 있다는 것을 배웠습니다. 이번 강의에서는 여기에서도 props가 비슷하게 작동한다는 것을 보게 될 것입니다.

우리가 React 컴포넌트 Block을 가지고 있고, Styled Components를 사용하여 스타일링된 컴포넌트 Input와 Container를 생성했다고 가정해 보겠습니다:

Block.jsconst Container = styled.div`
  display: flex;
  flex-direction: column;
  width: 150px;
`;

const Input = styled.input`
  margin: 5px;
  font-size: 18px;
`;

세 개의 Input 컴포넌트를 Container 내에 배치해 봅시다:

Block.jsfunction Block() {
  return (
    <Container>
      <Input />
      <Input />
      <Input />
    </Container>
  );
}

Props를 사용하여 컴포넌트에 다양한 속성을 설정할 수 있습니다. 두 번째 인풋에 속성 placeholder와 type를 각각 값 name와 text로 설정하고, 세 번째 인풋의 속성 type는 값 password로 설정해 보겠습니다:

Block.jsfunction Block() {
  return (
    <Container>
      <Input />
      <Input placeholder="name" type="text" />
      <Input type="password" />
    </Container>
  );
}