React - Styled Components

Styled Components

• 컴포넌트 기반 개발 방법에서는 HTML, CSS, Javascript를 하나의 파일에 모으는 패턴이 선호된다.
• JSX를 통해 Javascript 코드가 HTML을 포함하고 있고, CSS는 Styled Components를 통해 삽입한다.
• 내부 CSS 코드는 기존 문법대로 작성하면 된다.

패키지 설치

$ npm i styled-components

HTML 엘리먼트 스타일링

import styled from "styled-components"

styled.div`
  // <div> HTML 엘리먼트 스타일 정의
`

React 컴포넌트 스타일링

import styled from "styled-components"
import Comp from "./Comp"

styled(Comp)`
  // <Comp> React 컴포넌트 스타일 정의
`