jsx..?

jsx는...

💡 자바스크립트와 HTML을 섞어서 쓸수 있는 자바스크립트의 확장된 문법이에요.

import ReactDOM from 'react-dom';

ReactDOM.render(
	<form>
		<label **htmlFor**="name">이름</label>
		<input id="name" type="text" />
	</form>
	<p id="hello" **className**="holy">안녕 정글 여러분~!</p>, 
	document.getElementById('root')); //???????????????

JSX의 문법 ... ?

참고) jsx 는 자바스크립트로 변환되어 실행돼요.

💡 Camel Case를 써야돼요.

onclick - onClick
onblur - onBlur
onFocus, onMouseDown, onMouseOver, tabIndex 등등...

💡 자바스크립트 예약어와 같은 속성명은 사용할 수 없어요.

for - htmlFor
class - className

1. 반드시! 하나의 요소로 감싸기 - a.k.a Fragment
   • 프로젝트 기억하시죠?

     ReactDOM.render(
       <>
         <p>안녕</p>
         <p>리액트!</p>
       </>,
       document.getElementById('root')
     );

2. 자바스크립트 표현식을 HTML과 함께 넣어볼까요?

import ReactDOM from 'react-dom';

const product = '정글 5기';
const model = '모두 모여라!';
const imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png'

function handleClick() {
  alert('축하드립니다!');
}

ReactDOM.render(
<>
	<h1>{product + ' ' + model}</h1>
	<img src={imageUrl} alt="ㅋㅋ" />
	<button onClick={handleClick}>지원하기</button>
</>,
document.getElementById('root')
);

단, JSX 문법에서 중괄호는 자바스크립트 표현식을 다룰 때 활용하기 때문에, 중괄호 안에서 for, if문 등의 문장은 다룰 수 없다는 점은 꼭 기억해 주세요.
그런데도 만약 JSX 문법을 활용할 때 조건문이 꼭 필요하다면 조건 연산자를, 반복문이 꼭 필요하다면 배열의 반복 메소드를 활용해 볼 수는 있겠죠?

JSX는 XSS 공격을 예방할 수 있어요!

JSX에 사용자 입력을 삽입하는 것은 안전합니다.

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환됩니다. 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있습니다.

더 알아보기

React 공식문서 - https://ko.reactjs.org/docs/introducing-jsx.html
jsx 깊은 이해 - https://blog.holy.kiwi/js/190120/