[React] Style-component에서 attrs() 사용하기

익숙한듯 익숙하지 않은 style-component... 지금까지 scss만 사용해오던 나에게는 아직까지는 조금 어색한 것 같다. 계속 쓰다보면 차차 나아지겠지...?

style-component에 대한 전반적인 내용은 나중에 한번에 정리하도록 하고 이번 포스팅에서는 프로젝트를 진행하면서 새롭게 알게된 스타일컴포넌트의 속성에 대해서 정리해보려고 한다.

attrs()

attrs()는 attributes를 삽입하기 위한 메서드이다. input button img등 의 arribute를 바꾸고 싶을 때 사용할 수 있다. attrs() 의 목적은 html tag가 갖고 있는 고유의 속성을 반복적으로 사용하지 않기 위해 만들어 졌고 한다.

attrs()가 상대적으로 generates a CSS class 방식 보다 가벼우므로 애니메이션 등의 자주 스타일이 변경되는 작업에 사용하면 효율적으로 메모리 사용이 가능하다.

// 변경 전

<SearchBox placeholder="검색" />

const SearchBox = styled.input`
	...	 
`

// 변경 후
<SearchBox />

const SearchBox = styled.input.attrs({ placeholder: "검색" })`
	...	 
`