ReactJS (1) JSX

간단하게 말하면 JSX는 HTML 코드를 자바스크립트 안에서 사용하는 걸 뜻한다.

JSX를 쓰면 더이상 createElement를 안 써도 돼서 간편하다

리엑트에서도 JSX를 쓸수있어 코드를 더욱 쉽게 짤 수 있다

 

예) 리엑트 요소 만들기 

const h3 = React.createElement(
  "h4",
  {
    id: "title",
    onMouseEnter: () => console.log("hi"),
    },
    "Hello"
)

 

 

 

예) JSX

const H4 = <h4 id='title' onMouseEnter={() => console.log("hi")}>hello</h4>

이런 식으로 JSX를 쓰면 HTML 코드와 거의 동일한 걸 볼 수 있다.

주의해야 될 점은 component 이름이 꼭 대문자로 시작해야 된다는 것. 이유는 component를 부를 때 대문자가 아니면 tag로 인식하게 된다