JSX

JSX

Javascript 의 확장문법
JS + XML 의 형태

• 표준 Js 문법은 아님

---

사용

	const App = () => {
      return (
      	<p>hello<p>
      );
    }

함수 내에 html 을 포함시킬 수 있다.

	const App = () => {
      const a = 'ing';
      return (
      	<div>
        	{a}
        </div>
      );
    }

html 태그 내에 동적으로 변수 할당이 가능하다.

컴파일링

JSX로 작성한 코드는 별도의 변환 과정이 필요하다.

	const App = () => {
      return (
      	<div>
        	Hello <strong>Wolrd</strong>
        </div>
      );
    }

위와 같이 작성한 코드는 바벨에 의해 아래와 같은 형태로 변환되어 렌더링 된다.

	function App() { 
	return React.createElement("div", null, "Hello ", React.createElement("strong", null, "World"))
}

변환과정 필요
=> 효율↓

특징

• 닫힌 태그

	const App = () => {
      return (
      	<div>a<div> //정상적으로 닫힌 태그
        <img src='' alt='' /> //닫힌 태그
      );
    }

모든 태그는 정상적으로 닫혀 있어야만 한다.
이미지 태그와 같이 기존에 닫히지 않아도 되는 태그의 경우에는
위와 같이 하나의 닫힌 태그로 만들어 줘야 한다.

• 하나의 태그만 반환 가능

	const App = () => {
      return (
      	<div>a</div> // err
        <div>b</div>
      );
    }

위와 같이 return 안에 부모요소로 묶이지 않은 태그들이 있을 경우 오류가 발생한다.

	const App = () => {
      return (
      	<>
        	<div>a</div>
        	<div>b</div>
        </>
      );
    }

위와 같이 하나의 태그로 묶어야 한다.

---

사용하는 이유(장점)

• 하나의 파일에 JS와 HTML을 동시에 작성할 수 있어 편리하다.
• JS에서 HTML을 작성하듯 하여 가독성이 좋다.