221102 TIL(Attrs)

1. Styled-Components Attrs

required의 property를 가지는 input 컴포넌트를 아래와 같이 여러개 쓴다고 가정하자

<Input required />	
<Input required />	
<Input required />

똑같은 props를 매번 써주기 귀찮다. 이럴 때 쓰는 것이 attrs

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

background-color:red

`

즉, html tag가 갖고있는 고유의 attribute를 넣어 재사용하기 위한 컴포넌트를 만들 때 attrs()를 사용하면 유용하다

• Use styled components for static styles and dynamic styles that don't change very often;
• Use inline styles (through .attrs) for styles that change frequently, like for animations.

attrs를 사용하면 그냥 props로 사용하는 것과 달리 인라인 스타일로 적용이 된다. 

애니메이션과 같이 스타일이 자주 바뀔 때 사용하면 좋다고 한다!