# 03. styled-component 로 스타일링해보기

### 들어가며

02\. Component 를 구성해보기에서는 아래와 같이 class 를 주고 해당 class 에 style 을 입히는 보편적인 방법을 이용하여 스타일링을 했습니다. \
React 에서 style 을 주는 방법은 정말 다양하지만 저는 일반적으로 많이 사용되어지는 [styled-component](https://www.styled-components.com/) 를 이용하여 style 을 추가해보려고 합니다.

```css
.wrap_header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #000;
}

.wrap_body {
  width: 120px;
  height: 100vh;
  float: left;
  border-right: 1px solid #000; 
}
```

### 실습

styled-component 를 이용하면 여러가지 장점이 있습니다.

* style 들을 잘게 쪼개어 재사용하기 좋습니다.
* 파일 단위, Component 단위의 스타일 관리가 가능합니다.
* React 의 상태값들과 조화롭게 사용이 가능하여 관리가 편합니다
* TS 와 같이 타입시스템을 이용하면 스타일을 한 눈에 확인 할 수 있습니다.

> 프로젝트는 [초기 세팅 상태](https://simplereact.gitbook.io/simplereact/02.-componet#undefined-1)로 진행되어집니다. +@ 로 이제는 styled-component 를 이용하기 때문에 App.css 파일이 필요없습니다.

styled-component 를 사용하기 위해서는 모듈을 설치해야합니다.

```javascript
npm i -S styled-components
```

styled-component 의 문법은 아래와 같습니다.

```javascript
import styled from 'styled-components'

const 변수명 = styled.태그`  // ` 는 ESC 아래에 있는 backtick 이라는 친구입니
  // style.....
`
```

조그만 파란색 상자를 만들어보겠습니다.

```javascript
// App.js

import React from 'react';
import styled from 'styled-components'

const BlueBox = styled.div`
  width: 100px;
  height: 100px;
  background-color: #00eaff;
`

function App() {
  return (
    <div>
      <BlueBox />
    </div>
  );
}

export default App;
```

![](/files/-LngefgIDghIM1iCeShQ)

#### 스타일 상속

기존에 스타일을 상속 할 수도 있습니다.

```javascript
// App.js

import React from 'react';
import styled from 'styled-components'

const BaseBox = styled.div`
  width: 100px;
  height: 100px;
`

const RedBox = styled(BaseBox)`
  background-color: #ff0032;
`

const BlueBox = styled(BaseBox)`
  background-color: #00eaff;
`

function App() {
  return (
    <div>
      <RedBox />
      <BlueBox />
    </div>
  );
}

export default App;
```

![](/files/-Lngf4YlrMn0B2nCwVnW)

#### Global Style 적용

일반적으로 프로젝트를 시작할때 Reset CSS 를 적용하고 시작을 하게 됩니다.\
styled-component 의 `createGlobalStyle` 을 이용하여 Global Style 을 적용할 수 있습니다.

```javascript
// components/common/global-style.js

import { createGlobalStyle } from 'styled-components'

export default createGlobalStyle`
html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  dfn,
  del,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  main,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  menu,
  nav,
  section {
    display: block;
  }
  /* HTML5 hidden-attribute fix for newer browsers */
  *[hidden] {
    display: none;
  }
  body {
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    -webkit-touch-callout: none;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  select {
    border-style: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  b,
  strong {
    font-weight: bold;
  }
  input {    
    -webkit-appearance: none;
  }
  button {
    border: none;
  }
`
```

만들어진 Global Style 을 App.js 에서 불러옵니다.

```javascript
// App.js

import React from 'react';
import styled from 'styled-components'
import GlobalStyle from './components/common/global-style'

const BaseBox = styled.div`
  width: 100px;
  height: 100px;
`

const RedBox = styled(BaseBox)`
  background-color: #ff0032;
`

const BlueBox = styled(BaseBox)`
  background-color: #00eaff;
`

function App() {
  return (
    <div>
      <GlobalStyle />
      <RedBox />
      <BlueBox />
    </div>
  );
}

export default App;
```

Reset CSS 가 먹힌것을 확인할 수 있습니다.

![](/files/-LnggXANDvb2w4X-bbHo)

앞으로 진행되는 모든 예제들을 styled-component 를 바탕으로 스타일링이됩니다.\
아직 State 를 배우지 않아 조건에 따른 스타일주는 예제를 해보지 못했지만 후에 State 부분에서 다시 한번 살펴보겠습니다.


---

# 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://simplereact.gitbook.io/simplereact/03.-styled-component.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.