JSX문법

JSX문법

JSX문범은 자바스크립트의 확장문법이다.
그래서 자바스크립트에서도 HTML처럼 태그를 사용할 수 있다.

예시로 아래와 같이 사용할 수 있다.

export default function Home() {
  
    return (
        <div>
            안녕하세요.
            <input type="text"/>
        </div>
    )
}

JSX문법의 장점은 보기가 쉽다.
자바스크립트로만 만들게 되면 DOM을 이용해야 하고 DOM은 직관적으로 보기 불편하다. 하지만 JSX문법은 HTML형식으로 보여주기 때문에 우리가 보기에 익숙하다. 그래서 우리가 직관적으로 볼 수 있다.

활용도가 높아진다.
HTML에서 태그를 쓰듯이 쓰면 되기 때문에 우리가 쉽게 사용할 수 있다.

---

JSX문법 규칙

JSX문법은 몇 가지 규칙이 있다.

1.감싸인 요소

function Home () {
	return(
    	<div>
      		<h1>안녕하세요.</h1>
      		<h1>반갑습니다.</h1>
      	</div>
    )
}

최상위 요소는 형제요소를 가질 수 없기 때문에 꼭 부모요소로 감싸주어야 한다.

2.className

function Home() {
	return(
    	<div className="box">안녕하세요</div>
    )
}

HTML에서 쓰던 class가 아닌 className을 사용해야 한다.

3.꼭 닫아야 하는 태그

function Home() {
	return(
    	<input type="text" placeholder="이름을 적으세요."/>
    )
}

HTML에서는 빈캐그를 작성할 때 끝에 / 를 쓰지 않아도 오류가 발생하지 않았지만 JSX문법애는 끝에 /를 써야 한다.

4.주석

function Home () {
	return(
    	<div>
      		{%<h1>안녕하세요.</h1>
      		<h1>반갑습니다.</h1>%}
      	</div>
    )
}

주석을 처리할 때는 {**} 형태로 할 수 있다.