JSX란?

JSX(JavaScript eXtension)은 JavaScript의 확장 버전이다. HTML문법을 JavaScript 코드 안에 작성하며, React에서 HTML 코드를 작성할 때 JSX를 사용한다.

export default function MyPage() {
	// 여기는 자바스크립트 쓰는곳
    return (
        <div>
          안녕하세요~!!
          <input type="text" />
        </div>
    );
}

JSX 문법

camelCase 명명 규칙을 사용한다.

onClick과 같은 EventListener를 camelCase로 사용한다.

import { useState } from "react";
export default function CounterStatePage() {
[count, setCount] = useState(0);

function counter() {
	setCount(count + 1);
}
return (
	<div>
  		<div>{count}</div>
  		<button onClick={counter}>UP COUNT!!</button>
	</div>
    );
}

부모 요소가 감싸고 있어야한다.

//오류 코드
export default function MyPage() {
	return(
    	<div>hi</div>
    	<div>hello</div>
    );

보통 div, Fragment,<> 등의 태그로 감싸준다.

export default function MyPage() {
	return(
    	<>
          <div>hi</div>
          <div>hello</div>
        </>
    );
    
export default function MyPage() {
	return(
    	<div>
          <div>hi</div>
          <div>hello</div>
        </div>
    );
    
export default function MyPage() {
	return(
    	<Fragment>
          <div>hi</div>
          <div>hello</div>
        </Fragment>
    );
    

{}를 이용한 자바스크립트 표현식 사용

JSX 내부 코드를 {}로 감싸주어 자바 스크립트 표현식을 작성할 수 있다.

export default function MyPage() {
	const hello = "안녕하세요~!";
    return (
		<div>
  			{hello}
  			<input type="text" />
		</div>
    );
}