📲 JSX

• JavaScript Syntax Extension의 약어로 React에서 사용하는 자바스크립트 확장 문법이다.
• JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

-> JSX의 장점

• HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙하다.
• HTML 태그를 사용하면서 동시에 JavaScript 도 함께 동작 가능하다.

-> JSX의 특징

• class 대신 className을 사용한다.
• Inline Styling : <div style={{color : "red"}}>Hello React</div>
• Self Closing tag : <div></div> vs. <div />
• 모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>) :
  JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 한다. Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능이며, div 태그의 불필요한 생성을 막을 수 있어 유용하게 사용된다.
  

<>  // React Fragments의 활용
  <div className="loginBtn" onClick={() => console.log("click")}>Login</div>
  <br />
  <div style={{backgroundColor: "grey", height: "10px"}} />
</>