🙋‍♀️JSX ?

JavaScript Syntax Extension : 마크업을 편리하게 작성하기 위한 js 확장 문법 (마크업과 js 동시에 쓸 수 있다)
기본적으로 React 요소를 만들 수 있게 해주는데 우리가 HTML에서 사용한 문법과 흡사한 문법을 사용한다.
JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

예시)

  const Title = () => (
 <h3 id="title" onClick={() => console.log("I'm clicked")}>
     Hello I'm a Title
   </h3>
 );

위의 코드를 보면 JSX는 HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙하다.
또한 HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있다.

JSX 특징

👉 JavaScript 표현을 할 시 중괄호 안에 적어준다.

onClick = {() => console.log("hi")}

👉 JS 문법을 기반으로 사용 => className 이라 표현한다.

<div className ='title'></div>

👉 Inline Styling 하는 방식

<div style={{color : "red"}}>Hello React</div>

👉 Self Closing tag의 사용

<br />과 같은 태그를 self closing tag라고 한다. JSX에서는 반드시 태그를 닫아주어야 하기 때문에 간편하게 self closing tag를 사용하는 경우가 많다!

👉 모든 요소를 감싸는 최상위 요소

JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 한다는 것이다.

🔖 <>...</> React Fragment
Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능이다. 요소들을 감싸는 div 태그의 불필요한 생성을 막을 수 있어 유용하게 사용됌!.

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

👉 반드시 무언가를 return 해주어야한다.

JSX 내에서 아무것도 return해주지 않고 component를 return해주면 오류가 난다는 점 기억하기!

👉 추가로 알아둘 것 - 중괄호 안에 들어갈 수 있는 것

JSX 내에서 중괄호 안에 들어갈 수 있는 것 : string number, string과 number를 return하는 함수 등. 연산식이나 삼항조건연산도 가능하다.
🔖삼항조건 연산이 render되는 것을 조건부 rendering이라고 부른다.

ex)

<div>{5 % 2 === 0? '짝수' : '홀수'}</div>

let num = 0;
const inCreaseNum = () => num++
 <div>{inCreaseNum}</div>

🍯 마무리

JSX 문법 나와서.. 정말 다행이다,,,ㅎ.ㅎ !