As and Attrs

버튼 태그를 하나 만들어 봅시다.

import styled from "styled-components";

const Container = styled.div`
  margin: 10px;
  background-color: whitesmoke;
  display: flex;
`;

const Btn = styled.button`
  margin: 0 auto;
  color: white;
  background-color: tomato;
  border: 0;
  border-radius: 15px;
`;

function App() {
  return (
    <Container>
      <Btn>Zero</Btn>
    </Container>
  );
}

export default App;

이 친구는 당연히 button class겠죠?
만약 모종의 이유로 이 style은 그대로 유지하되 다른 태그를 쓰고 싶다면 어떻게 해야 할까요?
이럴 때 사용할 수 있는 것이 'As' 입니다.

<Btn>Zero</Btn>
<Btn as="span">One</Btn>

보시는 것 처럼 style은 동일하지만 태그는 span인 상태로 컴포넌트가 생성되는 것을 확인할 수 있습니다.

이번엔 Attrs에 대해 살펴봅시다.
만약에 특정 html 태그에 대해 모두 동일한 속성을 주고 싶을 때 사용하면 좋은 기능입니다.

Input 기능을 여러개 만들고 모두 required가 필요하다고 가정해봅시다.

import styled from "styled-components";

const Container = styled.div`
  margin: 10px;
  background-color: whitesmoke;
`;

const Input = styled.input`
  background-color: tomato;
`;

function App() {
  return (
    <Container>
      <Input required/>
      <Input required/>
      <Input required/>
      <Input required/>
      <Input required/>
    </Container>
  );
}

export default App;

일일이 Input 컴포넌트에 required 속성을 주는건 너무 비효율적인데 한번에 줄 수 있는 방법이 없을까요? 바로 이 때 Attrs를 사용하면 됩니다.
attrs()에는 후에 Input으로 전달될 모든 속성을 가진 오브젝트를 담을 수 있습니다.

import styled from "styled-components";

const Container = styled.div`
  margin: 10px;
  background-color: whitesmoke;
`;

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

function App() {
  return (
    <Container>
      <Input />
      <Input />
      <Input />
      <Input />
    </Container>
  );
}

export default App;