React- JSX문법

모든 코드에 의미를 담겠습니다.

React에서 JSX문법을 정의하기에 앞서서 React는 SPA(single page application) 즉 하나의 url가지고 운영이되는 프레임워크다.

React에서 사용하는 JSX문법이란 과연 무엇일까??

HTML문법을 자바스크립트 내에 쓴것이라고 보면 되겠다. 자바스크립트로 썼던것이 나중에는 HTML파일로 변경이 되서 페이지에 뿌려지는 형태로 하나의 컴포넌트에 Javascript + HTML이 동시에 존재하는 구조라고 보면 되겠다.

import styled from "emotion/styled"
export const hi = <div>p</div>
export const hi_myname = styled.div`
	max-width: 1200px;
	height: 50px;
	display: flex;
`
export element = {
  	<div>hi</div>
  	<p>Coding is very funny </p>
}

이런식으로 javascript 처럼 변수안에 html 태그를 쓸 수 있어서 굉장히 편하다.

JSX문법에 몇가지 중요한 규칙이 있으니 짚고 넘어가보자.

(1) 속성 즉, 태그안에 style className 이런것들을 줄때 무조건 ""로 구성을 해야한다.

<div style = "{}"></div>

(2) 태그는 항상 닫혀있어야 한다.
(3) 어떤 태그라도 self-closing이 가능하다.

더 자세하게 React JSX 문법에 대해서 알고 싶다면, JSX 공식문서를 참조하라!!