# Styled-components

### CSS 파일을 작성하지 않고 JS에 작성해 보도록 합시다.

css-in-js는 말 그대로 CSS파일을 JS에 작성하는 것을 뜻합니다. 그렇다고 CSS를 인라인으로 작성하자는것은 아니고, 더 효율적이고 간편하게 가고 싶은 개발자들의 요구에서 나온 CSS페러다임 중 하나입니다. 리액트 진영에서는 CSS-IN-JS 라이브러리 중에 styled-components가 대표적으로 많이 사용되는 것 같습니다.

### 왜 편한지 보여드리기 전에, 모듈 설치부터 진행해 봅시다.

`yarn add styled-components` 

`npm i styled-components` 

프로젝트 폴더 내에 설치해 주세요.

설치가 완료되셨다면, 이제 간단한 CSS를 작성해 보도록 합시다.

![styled-components의 사용법](https://3334242005-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LV81lySVctD2m2qG3Ob%2F-LbYwiWzf7a6mh2A4Ier%2F-LbYxu8KrjDJGdzoVBrE%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202019-04-04%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%201.10.13.png?alt=media\&token=dde2fc44-6490-4ebb-a16a-10a22397828a)

styled-component를 default로 import를 한 후에, styled.\[사용하고 싶은 HTML태그] \`\` (백틱 문자열) 의 형태로 CSS를 작성하게 되면, 작성한 스타일을 가지고 있는 div 태그가 하나 생성됩니다. 그 변수를 JSX안에서 마치 태그처럼 사용할 수가 있게 됩니다.

![적용이 잘 되었습니다.](https://3334242005-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LV81lySVctD2m2qG3Ob%2F-LbYwiWzf7a6mh2A4Ier%2F-LbYyFSYsBNcgIzlzve1%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202019-04-04%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%201.12.12.png?alt=media\&token=0994c851-b4f4-474e-9537-6c4595bf3cc3)

CSS-IN-JS의 또다른 장점은, 마치 순수한 CSS를 작성하는 느낌도 받으면서 JS의 데이터 값을 다루는 느낌도 동시에 받을 수 있습니다. 

styled-component 공식 사이트에 있는 예제 소스를 기반으로 설명 드리겠습니다.

![props.primary ?](https://3334242005-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LV81lySVctD2m2qG3Ob%2F-LbYwiWzf7a6mh2A4Ier%2F-LbYyutnC_5p6aCiyePb%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202019-04-04%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%201.14.58.png?alt=media\&token=631a367c-87f1-4272-8bc6-9f71ed15f508)

Button이라는 HTML 버튼을 만들고, css를 적용시켜 주었습니다. 그런데 가만 보면 props.primary라는 삼항연산자를 사용해 다른 스타일을 주고 있는 모습을 볼 수 있습니다. 이것이 바로 CSS-IN-JS의 장점입니다. 변수 하나를 만들 때에는 순수한 CSS를 작성하는 느낌을 주지만, props값을 넘겨주고 그 에대한 로직을 작성하는 순간에는 JS를 하고 있는 것을 느낄 수 있습니다.

아주 간단한 CSS를 작성하는 컴포넌트에서는 CSS-IN-JS를 적극적으로 활용하면 불필요한 CSS파일 생성이 줄어들어 좋지 않을까 생각해 봅니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ljh86029926.gitbook.io/coding-apple-react/2/undefined/styled-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.