React StyledComponents 1

const Father = styled.div`
	display: flex;
`;
const Box = styled.div`
	background-color: ${(props) => props.bgColor};
	width: 100px;
	height: 100px;
`;
const Btn = styled.button`
	color: white;
	background-color: tomato;
	border: 0;
	border-radius: 15px;
`;

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

function App(){
  return (
    <Father as="header">
    	<Btn>Log in</Btn>
    	<Btn as="a" href="/">Log in</Btn>
    	<Input />
    	<Input />
    	<Input />
    	<Box bgColor="teal" />
    	<Box bgColor="tomato" />
    <Father />
  );
}

1. as를 붙여서 원래 태그가 아닌 다른 태그로 사용할 수 있도록 할 수 있다. 컴포넌트의 모든 것을 똑같이 가져가는 대신 html의 태그명만 바꿔줄 수 있다.
2. attrs를 붙여서 모든 Input 컴포넌트가 required: true값을 가지게 할 수 있다. html element에 해당되는 것을 모두 넣을 수 있음
3. props를 사용하여 각 컴포넌트를 configurable하게 만들 수 있다.