#2.3 'As' and Attrs

본 포스팅은 노마드코더의 ReactJs 마스터 클래스 강의를 수강하고 작성되었습니다.

다수의 컴포넌트를 다룰 때 도움이 될만한 몇가지 트릭들은 다음과 같다.

❓❓ 컴포넌트의 태그를 바꾸고 싶은데 스타일은 바꾸고 싶지 않을때 어떤 일이 일어날까? ❓❓

아래는 예시이다.

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

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

const App() {
  return (
    <div>
    	<Btn>Log in</Btn>
    	<Btn2> href="/">Log in</Btn2>
    </div>
);

현재 Btn2는 Btn과 스타일이 동일하지만, 태그가 button에서 a로 변화하였음을 알 수 있다.

중복이 발생하고 있는 것이다. 😥

AS 사용하기

as라는 props를 보냄으로써 이를 해결할 수 있다.

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

const App() {
  return (
    <div>
    	<Btn>Log in</Btn>
    	<Btn as="a" href="/">Log in</Btn>
    </div>
);

이렇게 하면, Btn을 a로서 사용하겠다! 라고 속성 즉 태그만 변화시켜줄 수 있다.

"Attr" 태그의 속성 한번에 작성해주기

동일한 태그를 여러개 작성하고, 해당 태그 안에 속성들을 모두 작성해야하는 경우가 있다고 하자.
이때는 일일이 모두 작성해주는 것에 있어서 불필요성이 존재한다.
따라서, 다음과 같이 styled-component상에서 속성을 지정해줄 수 있다.

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

function App() {
  return (
    <div>
    	<Input /> //<Input required:true/> 라고 할 필요가 X어짐
    	<Input />
    	<Input />
    </div>
);

이렇게 attr를 사용하면, 내가 만들어낸 모든 Input들이 required:true를 초기 값으로 가지고 있음을 알 수 있다.