[React] as와 attrs 사용법

언제 as를 사용하는가

• 같은 스타일을 쓰고 싶은데 단순히 HTML 태그만 변경하고 싶을 때
  
  

as 사용법

• prop에 as를 추가하면 된다

<Button>Button</Button>
<Button as='a' href='/'>AButton</Button>

const Btn = styled.button`
  color: white;
  background-color: pink;
`;

언제 attrs를 사용하는가

• 같은 컴포넌트에 같은 HTML 속성을 적용할 때
• 단, 자주 사용되는 방법은 아님

attrs 사용법

• 스타일 컴포넌트에 .attrs({placeHoldoer})

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