JSX

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

JSX로 작성된 코드

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

자바스크립트로 변환된 코드

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

---

ReactDOM.render(
  <React.StrictMode>
  	<App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render

• 컴포넌트를 페이지에 렌더링하는 역할
• react-dom 모듈을 불러와 사용 가능
• 첫 번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성, 두 번째 파라미터에는 해당 JSX를 렌더링할 document 내부 요소를 설정

React.StrictMode

• 리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능
• 나중에 완전히 사라지게 될 옛날 기능을 사용했을 때 경고를 출력한다.

---

JSX 문법

감싸인 요소

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

function App(){
  return(
    <h1> 이렇게 하면 </h1>
    <h2> 오류남 </h2>
    )
}

why? > Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 존재

자바스크립트 표현

JSX 안에서 자바스크립트 표현식 작성하려면 { }로 감싸면 된다.

function App() {
  const name = "react";
  return (
   <>
    <h1>{name} 안녕</h1>
    <h2> 잘 작동하니? </h2>
   </>
  );
}

조건부 연산자(삼항 연산자)

JSX 내부의 자바스크립트 표현식에서는 If문 사용 불가

{name === "리액트" ? (<h1> 리액트입니다.</h1> ) : ( <h2>리액트가 아닙니다.</h2>)}

AND연산자 (&&)를 사용한 조건부 렌더링

리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않음

return <div>{name === "리액트" && <h1>리액트입니다.</h1>}</div>;

주의할 점

falsy한 값인 0은 예외적으로 화면에 나타난다.

const number = 0;
return number && <div>내용</div>

undefined를 렌더링하지 않기

함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다. (JSX내부에서 렌더링하는 것은 가능)
OR연산자(||)를 사용해 해당 값이 undefined일 때 사용할 값을 지정해서 오류를 방지한다.

인라인 스타일링

리액트에서 DOM요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 줘야 한다.
camelCase로 작성

class 대신 className

<div className="react"> </div>

self-closing 태그

• 태그 사이에 별도의 내용이 들어가지 않는 경우
• 태그를 선언하면서 동시에 닫을 수 있는 태그
  <input />

주석

{/* JSX 내부에서 주석 장성 방법 */}