JSX와 CSS-IN-JS

1. JSX

JavaScript Xml 자바스크립트의 확장 문법

• React에서 사용하는 HTML

• 속성값의 대소문자 차이를 제외하면 HTML과 거의 비슷하다.
  기존: class --> JSX: className
  기존: onclick --> JSX: onClick

• 최종적으로 소스코드가 브라우저에서 실행되는 과정에서 JSX가 HTML로 자동으로 변환된다. (웹브라우저는 HTML, CSS, Javscript만 읽을 수 있음)

• 리액트에서는 virtual DOM을 다루고 있기 때문에 HTML을 가장한 JSX를 사용해야 한다.

2. CSS-IN-JS

• CSS를 JS 상수에 저장해서 사용하는 방법이다.
• HTML 태그처럼 사용 가능
• good1) 태그에 의미를 부여할 수 있어서 태그만 보고 결과물을 예상하기에 용이하다.
• good2) 코드 길이가 짧아진다.

기존 CSS

.tile {
	width: 996px;
    }

CSS-IN-JSS

//CSS를 상수에 저장, 백틱 사용
const Title = styled.div`
	width: 996px;
`

기존 HTML

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

CSS-IN-JSS

<Title>Hello World</Title>