'As' and Attrs

as

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

    <Father>
      {/* <Box boxColor="blue" />
      <Circle boxColor="pink" /> */}
      <Btn>Login</Btn>
    </Father>

버튼을 하나 만들어 보았습니다 근데 어떤 이유로 button HTML 태그를 사용하고 싶지 않다면 어떻게 해야 할까 예를 들어 href으로 사용하고 싶다는 경우라면

as를 사용해보자

Login 를 사용하게 되면

사진에 보이는 것 처럼 태그 형태가 바뀐 것을 볼 수 있다.

attrs

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

return (    
    <Father>
      {/* <Box boxColor="blue" />
      <Circle boxColor="pink" /> */}
      <Btn as="a" href="/">Login</Btn>
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
    </Father>
  );

예를 들어 굉장히 많은 수의 Input이 있다고 가정 했을 때 그리고 속성 값으로 required가 있다고 하면 하나씩 적는 것보다 더 효율적인 방법이 있습니다.

이렇게 적용해보자

const Input = styled.input.attrs({ required: true })

멋진 것 같습니다