[React] Styled Component(As, Attr)

 

import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;

const Input = styled.input.attrs({ required: true })`
  background-color: tomato;
`;

function App() {
  return (
    <Father as="header">
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
    </Father>
  );
}

export default App;

 

As

as 라는 props를 사용하면 명시한 태그로 컴포넌트를 사용할 수 있다.

Father 컴포넌트는 header가 된다.

 

 

Attrs

attrs 뒤에 대괄호 안에는 input으로 전달된 모든 속성을 가진 오브젝트를 담을 수 있다.

모든 input 에 required: true가 적용된다.