JSX란?

JSX란? (JavsScript Syntax eXtention)

자바스크립트 XML의 약자, XML은 HTML의 한계 극복 위한 마크업 언어.
JSX는 자바스크립트를 확장한 문법, HTML을 React에서 쉽게 쓰기 위해 사용
React는 JSX 문법을 이용해 마크업 언어와 코드의 로직을 따로 분리하지 않고 두 가지를 포함한 컴포넌트

• JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장
• HTML과 비슷하게 생겼으나 JacaScript이고, HTML과 다른 부분 존재
• 실제로 배포할 경우, Trans Compile이 되어 JavaScript로 변환된다
• JSX는 Babel에 의해서 Transcompile 된다

const App = () => {
  return (
    <div>
      <p>안녕</p>
      <MyComponent text="반가워"/>
      <div>바이바이</div>
    </div>
  )
}

JSX의 장점

1. 개발자 편의성 향상
2. 협업에 용이, 생상성 향상
3. 문법 오류와 코드량 감소

JSX 특징

1. HTML 태그 내에서 JavaScript 연산

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

2. class → className
   class명 표기 시, className으로 작성해야함

3. 스타일은 object로

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

• {{ style here }} 첫번째 중괄호는 여기서부터 js 표현을 쓰겠다. 두번째 중괄호는 js object의 시작을 나타냄
• Inline Style의 Property name은 camelCase로 적어야 함
  예시 : font-size → fontSize, padding-left → paddingLeft

4. 닫는 태그 필수
   <br/> , <img/> , <input/>

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

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

5. 최상단 element는 반드시 하나
   JSX의 원칙상 최상단 Element는 한 개만 작성이 가능하기 때문에 이를 <div> 또는 <React.Fragment>를 이용해 감싼다. 실제 렌더링 시에는 Fragment 안에 있는 내용만 출력함.
   <React.Fragment> 는 간단히 <>로 표기가 가능하다.