[React]styled-components 태그 바꾸기, 속성(2)

이번에도 역시 import 하고 시작

import styled from 'styled-components';

1. 태그 바꾸기

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

기존에 작성한 Btn component가 있다. 이 component의 속성을 그대로 사용하면서 태그만 바꾸고 싶을때

<Btn as="a">log out</Btn>

이렇게 바꾸고 싶은 속성을 as를 사용해서 바꿔줄 수 있다.
개발자 도구 element에서 보면 이렇게 바뀐다.

2. component 속성 추가

const Input = styled.input`
  background-color: red;
  height: 10px;
`;

Input의 속성을 추가하려면

const Input = styled.input.attrs({ required: true })`
  background-color: red;
  height: 10px;
`;

기존에 작성한 코드 뒤에 .attrs({ required: true })를 추가한다.
모든 Input component에 required속성이 추가된 것을 확인할 수 있다.