JSX와 CSS-IN-JS

JSX

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

• React에서 사용하는 HTML
• 속성값의 대소문자 차이 제외하고 거의 비슷함
• 최종적으로 소스코드가 브라우저에서 실행되는 과정에서 JSX가 HTML로 자동으로 변환됨 (웹브라우저는 HTML, CSS, Javscript만 읽을 수 있음)
• 리액트에서는 virtual DOM을 다루고 있기 때문에 HTML을 가장한 JSX를 사용해야 한다.

기존 class --> JSX className
기존 onclick --> JSX onClick

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>