스타일 컴포넌트 흝어보기

스타일 컴포넌트는 무엇이고 또 왜 사용할까?

스타일 컴포넌트는 스타일이 포함된 리액트 컴포넌트를 만드는 것이라고 생각하면 됩니다. 아주 직관적인 이름을 지었다고 생각이 되네요. 이렇게 스타일이 포함된 컴포넌트를 만들면 무슨 장점이 있을까요? 당연히 css나 scss파일을 만들 필요가 없습니다. 왜냐하면 스타일이 포함되어 있기 때문입니다. 그러므로 className을 고민할 필요도 없고, 모든 것을 자바스크립트로 해결할 수 있다는 장점이 있습니다.

한 번 이용해봅시다.

설치하는 방법은 언제나 그렇듯 간단합니다.

yarn add styled-components 또는 npm install --save styled-components

설치가 완료되었다면 한번 컴포넌트를 만들어 보겠습니다.

Wrapper라는 검은색 모서리가 둥근 상자를 만들어봤습니다. 코드를 하나하나 살펴보도록 하겠습니다. 우선은 styled라는 이름으로 import 했고, 스타일 컴포넌트를 만들때는 styled.div라고 적었습니다. styled 다음엔 그냥 html 태그는 적으면 됩니다. 그리고 ``을 사용해서 css 코드를 그대로 적었습니다 따옴표가 아니가 grave accent입니다. 보통 자판에서 1 옆에 tab버튼 위에 위치하고 있습니다. 이런식으로 컴포넌트를 만든 다음에 App 컴포넌트를 통해서 렌더링 했습니다. 아주 간단하죠?

주의사항

컴포넌트 내부에서 스타일 컴포넌트를 만들지는 마세요. 이럴 경우 매우 느리고 별로라고 설명 문서에 적혀있습니다.

우리가 만든 첫번째 스타일 컴포넌트로 설명하자면 이런 형태로 만들지 않으면 됩니다.

장점을 느껴봅시다.

css에서 할 수 있는 것은 다 할 수 있고, 자바스크립트를 통해서 할 수 있는 것들도 다 할 수 있습니다.

theme라는 js파일을 만들고 그 안에 있는 Theme 객체에 성공시 success color와 fail color를 만들었습니다. 이 파일을 우리의 첫 번째 스타일 컴포넌트에 불러와보도록 하겠습니다.

그레이브 액센트 안에서 자바스크립트를 사용하려면 ${}를 쓰면 됩니다. Theme.successColor를 입력하니 우리가 입력했던 색으로 변한 것을 확인할 수 있습니다. 이런식으로 색들을 정해놓고 쓰다가 나중에 변경할 일이 있으면 Theme 안에서 변경만 하면 자동으로 다 바뀌겠죠? 스타일 컴포넌트의 써봐야 할 기능은 많습니다. 다음 포스팅에서는 스타일 컴포넌트의 쓸만한 기능들을 정리해서 올려보도록 하겠습니다.

스타일 컴포넌트에 대한 소개겸 설치 방법 포스팅이었습니다. 다음포스팅에서 더 많은 기능들을 소개하도록 하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.