1. JSX

💨 JSX란?

 

함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 Javascript의 확장 

 

💨 JSX의 특징 

 

1. HTML 태그 내에 JavaScript 연산 

 

* HTML + JS

 

<div>
  <span id ="a"></span> +
  <span id ="b"></span> = 
  <span id = "sum"></span>
</div>

<script>
  const a = 3;
  const b = 6;
  document.getElementById("a").innerHTML = a;
  document.getElementById("b").innerHTML = b;
  document.getElementById("sum").innerHTML = a+b;
</script>

 

* JSX

 

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

 

JSX로 코드를 작성할 때 훨씬 간단해진걸 알 수 있다. 

 

2. class -> className 

 

{
  <div className="greeting", style={{ padding:10, color: 'red' }}>
    {name}님 안녕하세요.
  </div>
}

 

JSX에서는 class 명을 작성할 때 className으로 해야한다. 

 

3. 스타일은 object로 

 

{
  <div className="greeting", style={{ padding:10, color: 'red' }}>
    {name}님 안녕하세요.
  </div>
}

 

첫 번째 중괄호는 "여기서부터 자바스크립트를 쓰겠다" 이고, 두 번째 중괄호는 자바스크립트 오브젝트의 시작을 의미한다. 

 

4. 닫는 태그 필수 

 

* HTML

<div>
  <input type="text">
    <br>
</div>

 

* JSX 

 

<div>
  <input type="text" />
  <br />
</div>

 

기존 HTML 에서는 닫는 태그를 작성하지 않아도 에러가 발생하지 않았으며, <input>, <br> 같은 일부 태그의 경우 아얘 닫는 태그를 생략하여 코드를 작성해도 되었으나 JSX 에서는 닫는 태그를 필수로 작성하여야 한다.

 

5. 최상단 element 는 반드시 하나 

 

* HTML 

 

const App = () => {
  return (
    <div> Hello </div> // 에러 발생! 
    <div> World </div>
  )
}

 

* JSX 

 

const App = () => {
  return (
    <> { /* React.Fragment */ }
      <div> Hello </div>
      <div> World </div>
    </>
  )
}

 

JSX의 원칙상 최상단 Element는 한 개만 작성이 가능하기 때문에, 이를 <div> 또는 <React.Fragment> 를 이용해 감싼다. 실제 렌더링 시에는 Fragment 안에 있는 내용만 출력된다. 

 

<React.Fragment>는 간단히 <> 로 표기가 가능하다.