(4)React_초급_JSX 문법1

● 정의 :

src폴더 내 js파일 내의 코드로 React 프로젝트를 수정할 때, html작성 문법 + JavaScript작성 문법의 짬뽕 스타일

ex_

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<h1>안녕 리액트!</h1>);//여기 내에서 작성하는 JSX 문법

 

● 주요 차이 :

①. 태그내에 class 속성 => className 속성  으로 값 대입

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<h1 className="title">안녕 리액트!</h1>);//여기 내에서 작성하는 JSX 문법

 

②. 태그 내의 for 속성 //label 태그에서 input속성과 함께 사용하는 속성 

=> htmlFor 속성 으로 값 대입 (javaScript의 for문법과 같아서,)

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<form>
	<label htmlfor="이름">
    	<input type = "text" id = "name">
    </label>
</form>

);//여기 내에서 작성하는 JSX 문법

③. 이벤트 관련 속성 //onclick , onforce, onmousedown, onblur

=> 카멜 Case 문법으로 onClick, onForce, onMouseDown, onBlur