스타일드 컴포넌트 더 알아보기

컴포넌트를 확장해봅시다.

저번 포스팅에서는 컴포넌트를 어떻게 만드는 지에 대해서 알아봤습니다. 이번 포스팅에서는 컴포넌트를 확장시켜보겠습니다. 

버튼을 만들고 그 버튼을 토대로 모서리가 둥근 버튼을 만들었습니다. 이미 있는 css 효과를 넣으면 기존 css 값이 수정되며 새로운 css 효과를 선언하면 새로운 값이 적용되서 컴포넌트가 만들어집니다.

기존의 만든 스타일 컴포넌트를 다른 태그로 이용할 수도 있습니다.

컴포넌트에 as라는 속성을 주고 값으로 제가 사용할 태그를 넣어주면 됩니다. 그럼 버튼 컴포넌트를 a태그로 사용할 수 있습니다. 지금 코드는 styled component v4에 적용된 코드이고, 따로 v4를 다운로드 받지 않았다면 아래의 코드를 사용하셔야 됩니다.

const AnchorButton = Button.withComponent("a");

withComponent에 사용할 태그를 넣어주면 됩니다.

injectGlobal 사용하기

바디에 css 속성을 넣을 수있을까요? injectGlobal을 사용하면 글로벌하게 넣을 수 있습니다.

이런 식으로 넣으시면 됩니다. 만약에 css 리셋등을 사용하신다면 이 부분에 넣어주시면 됩니다. css 파일을 따로 만들어야할 이유들이 사라지고 있죠?

v4에서는 createGlobalStyle로 변경됩니다. 주의하세요.

공통적으로 사용할 부분은 따로 만들어서 불러와도 됩니다.

컴포넌트이다보니 자주 사용하는 컴포넌트를 처리하듯 따로 만들어 놓고 불러와서 사용해도 됩니다. v4가 적용되면 자주 사용할 api들이 변경되는 점만 유의해서 사용하시면 됩니다. 리액트 네이티비에서도 사용할 수 있으니 컴포넌트의 재사용성이 더 늘어날 수 있는 장점이 많은 라이브러리입니다. 스타일드 컴포넌트를 통해서 좀 더 재미있는 코딩이 되었으면 합니다.