JS JSX

요즘 공부하면서

내가 알던 문법이랑 이전에 배운 코드랑 다르길래

잘못 기억하고 있는 줄 알았더니~

리액트에서 사용하는 jsx 문법이랑 js 문법이라 ㅇ차이가 있는거였다.. 

 

 

JSX자체가

js 안에서도 html 마크업 형태의 구조를 작성할 수 있도록

도와주는 확장 문법 라이브러리였다

 

원래는 html 파일과 js파일을 분리해야했으나

 

// script.jsx 파일

const title = 'Hello, World!';

const element = (

<h1> {title} </h1>

);

ReactDOM.render(element, document.getElementById('root'));

이런식으로 함께 사용할 수 있게 된다

 

여기에서 헷갈렸던 부분이 나온다

- JSX는 {  }중괄호를 사용하여 JS 표현식을 사용한다. (title)

- 클래스명은 'className' 으로 작성한다

- 이벤트 핸들러를 사용할 때, 

JS

onclick="handleClick()"

JSX

onclick="handleClick"

 

JSX의 탄생도 React와 함께 생겨났다네요

 

 

 

https://leekh109.tistory.com/24

그래서 JSX가 뭔데? (JS와의 차이점, 장단점 그리고 사용 팁 등 etc)