{
  "path": "/*",
  "*": "2022-10-18-21-53-emotion",
  "uri": "/",
  "location": {
    "pathname": "/2022-10-18-21-53-emotion/",
    "search": "",
    "hash": ""
  },
  "data": {
    "markdownRemark": {
      "html": "<p>블로그를 수정하며 @emotion을 사용하게 되었습니다.</p>\n<p>사용하면서 학습한 두가지 스타일에 대하여 정리합니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"> // Kebab Case\n const Style1 = styled.div`\n\t font-size: 20px;\n\t font-weight: 700;\n `\n // Camel Case\n const Style2 = styled('div')(() => ({\n\t fontSize: '15px',\n\t color: 'blue',\n }))</code></pre></div>\n<p>위와 같이 Kebab Case와 Camel Case에 대하여 용법의 차이가 있습니다.</p>\n<p>Kebab Case는 -을 통해 단어를 연결하며, ‘으로 감싸지 않아도 상관없습니다.</p>\n<p>하지만 Camel Case는 합쳐진 부분의 맨첫 문자를 대문자로 표시해야 하며, 값은 무조건 String Type으로 전달하여야 한다는 점입니다.</p>\n<p>또한 Styled Component는 사용시 Prop를 받을 수 있는데 이때 아래와 같이 사용 가능합니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"> // Kebab Case\n const Style1 = styled.div&lt;{ disable: boolean }>`\n\t font-size: 20px;\n\t font-weight: 700;\n\t text-decoration: ${( { disable }) => (disable ? 'line-through' : 'none')};\n `\n // Camel Case\n const Style2 = styled('div')(() => ({\n\t fontSize: '15px',\n\t color: 'blue',\n\t textDecoration: disable ? 'line-through' : 'none',\n }))</code></pre></div>",
      "fields": {
        "slug": "/2022-10-18-21-53Emotion 사용기/"
      },
      "frontmatter": {
        "date": "2022-10-18 21:53"
      }
    }
  },
  "pageContext": {
    "id": "7b5f1a42-e7ec-5cef-8662-575323ee4176",
    "fields__slug": "/2022-10-18-21-53Emotion 사용기/",
    "__params": {
      "fields__slug": "2022-10-18-21-53-emotion"
    }
  },
  "params": {
    "fields__slug": "2022-10-18-21-53-emotion"
  }
}