CSS-IN-JS (Emotion)

✍️ 정의

React의 인기 CSS 방식이다.

CSS를 자바스크립트 파일에 넣어놓고 쓴다는 의미이다.

⚒️ 2가지 도구

1. styled-components
   • yarn add styled-components
   • npm install styled-components
2. emotion

🆚 기존 CSS 방식 vs CSS-IN-JS 방식

기존 CSS 방식

.title {
	width: 996px;
    height: 52px;
}

<div className={styles.title}>Hello World</div>

CSS-IN-JS 방식

import styled from '@emotion/styled'

const Title = styled.div `
	width: 996px;
    height: 52px;
`

import {Title} from '../../styles/emotion'

<Title>Hello World</Title>

• 자바스크립트 파일 하나로 통합할 수 있다.
• CSS가 첨가된 HTML 코드를 만드는 것임.
  • 변수에 저장하여 언제든 효율적으로 쓸 수 있음.

📌 Emotion 사용시, 장점

1. 간결한 코드
2. 태그에 의미 부여
3. 코드 재사용성 증가