JSX란?

JSX는 자바스크립트의 확장 문법이다.
XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 자바스크립트 형태의 코드로 변환된다.

바벨은 변환한 값이 보이지는 않지만 head에 담겨있다.

경고
JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다.
예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 됩니다.

function App(){
	return (
    	<div>
        	Hello <b>react</b>
        </div>
    );
}

아래와 같이 변환된다.

function App(){
	return React.createElement("div", null, "Hello", React.createElement("b", null "react"));
}

만약 컴포넌트를 렌더링할 때마다 위 코드처럼 함수를 사용하면 매우 불편할 것이다.
JSX를 사용하면 매우 편하게 UI를 랜더링할 수 있다.

---

JSX 문법 규칙

보통 하나의 컴포넌트에서 return 부분에서 거의 사용

감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

//잘못된 코드 function App(){ 
return(
<h1>Hello</h1>
<h2>World</h2>
) } 

//올바른 코드

function App(){ 
return(
<div>
  <h1>Hello</h1>
  <h2>World</h2>
</div>
) }
---------------------------------------------------------
//div 요소를 쓰고 싶지 않을 때는 Fragment라는 기능을 사용한다.
//일단 코드 상단 import 구문에서 react 모듈에 들어있는 Fragment라는 컴포넌트를 추가로 불러오기

import React, {Fragment} from 'react';

function App(){ 
  return( 
    <Fragment>
      <h1>Hello</h1>
      <h2>World</h2>
    <Fragment> 
)} 

function App(){ 
  return( 
    <>
      <h1>Hello</h1>
      <h2>World</h2>
    <> 
)} 

자바스크립트 표현

JSX가 내부에서 자바스크립트 표현을 사용하려면 {}를 사용하여야 한다

function App(){ 
  const name = "hong"
  return( 
    <>
      <h1>Hello! {name}</h1>
      <h2>World</h2>
    <> 
)} 

조건부 연산자

JSX 내부에 자바스크립트 표현식에서 if문을 사용할 수는 없다.
하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나 {} 안에 조건부 연산자를 사용하면 된다.
조건부 연산자는 삼항연산자이다.

function App(){ 
  const name = "hong"
  return( 
    <>
      {name === "hong" ? (<h1>It's true</h1>) : (<h2>It's not true</h2>)}
    <> 
)} 

출처 : https://developerntraveler.tistory.com/54

useState

React에서 만약 click event를 사용하였을 때 useState를 사용을 안 하면

ReactDOM.render(<App />, root); //(랜더링할 함수, 랜더링할 위치)

이런식으로 랜더링을 하면 root에 app을 넣어 한 번만 랜더링이 되기 때문에 click event가 계속해서 일어나지 않는다.
그렇기 때문에 리랜더링을 시켜 올려줘야하기 때문에 useState를 사용하는 것이다. useState를 사용하면 자동으로 리렌더링이 된다!!

그리고 react에서 event 함수는 적용시킬 tag에 넣는다!!!
또한 아래에 보면 useState의 원리를 알 수 있다.

function App() {
      const [counter, setCounter] = React.useState(0);
      //const x = [1,2,3]  === const [a, b, c] = x;   a===1,b===2,c===3 이 원리를 사용
      //console.log(counter);

      function onClick() {
        setCounter(counter + 1); // 자동으로 리렌더링을 시켜준다.
      }

      return (Click m
        <div>
          <h3>Total clicks: {counter}</h3> {/*jsx에 javascript식 변수 넣는 방법*/}
          <button onClick={onClick}>Click me</button>
        </div>
      ); //컴포넌트의 첫글자는 반드시 대문자여야 한다. 소문자는 HTML tag.
    }

useState에서 set 부분을 사용하는 2가지 방법

const [counter, setCounter] = React.useState(0);
function onClick() {
        // setCounter(counter + 1); // 자동으로 리렌더링을 시켜준다.
        setCounter(function (current) {
          console.log(current);
          return current + 1;
        }); // setCounter((current) => current +1);
      } // 함수형을 더 쓰려고 노력하자

style inline

<button style={{ backgroundColor: "tomato" }} /> //기본적으로 style을 인라인으로 넣을 때는 객체형태로 들어가야 한다.