js - emotion, css-in-js

JSX
: React 전용 HTML

기존 html 방식

<div>
  	<div class="title">제목<div>
    <button onclick="alert()">버튼</button>
</div>

JSX 방식

<div>
  	<div className={title}>제목<div>
    <button onClick={alert()}>버튼</button>
</div>

CSS-IN-JS
:css를 javascript 안에 넣기

기존 CSS 방식

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

CSS-IN-JS
1. styled-components
2. emotion

: 이해하기 쉽게 나만의 tag를 만들 수 있다는 장점 (태그에 의미 부여)
: 하나의 css를 재사용할 수 있다 (재사용성 증가)
: 코드의 길이가 줄어듬

================================================
기존의 프론트 코드를 작성하는 방법에서 css-in-js 방식과 JSX 방식이 함께 사용되면서 더이상 .html, .css 형식이 파일이 필요하지 않음 !!!

• 모든 코드들이 .js 파일 형식으로 변하게 되었다.

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

예시 코드

index.js

import {MyEmail, MyEmailInput} from '../../../styles/01-02-emotion'

export default function EmotionPage(){

    //여기는 자바스크립트 쓰는곳

    return (
        <div>
            <MyEmail>이메일 :</MyEmail>
            <MyEmailInput type="text" />
            <button>클릭하세요!</button>
            <img src="/next.svg" />
        </div>

    )

}

원래 .html 형식으로 작성하고 .css 스크립트를 연결하는 형식으로 사용하지만 .js형식으로 html을 작성하였다.

emotion.js

import styled from '@emotion/styled'

export const MyEmail = styled.span`
    color: blue;
    font-size: 25px;
`

export const MyEmailInput = styled.input`
    border-color: red;
`

• 원래 .css 형식으로 styles를 작성하고 .html과 연결하는 형식으로 사용하지만 .js형식으로 css을 작성하였다.