JSX

babel : 작성한 어떤 코드를 순수하게 실행할 수 있는 자바스크립트로 변환시켜줌

ReactDOM.createRoot(document.querySelector("root").render(
	<div>
      <h1>주제</h1>
      <ul>
        <li>React</li>
        <li>Vue</li>
      </ul>
  	</div> 
    /*
    ==> 다음과 같은 html방식의 코드도 브라우저가 이해할 수 있는 javascript로 변환시켜준다. 
    마찬가지로 babel 은 jsx문법을 이해해서 jsx문법도 순수한 자바스크립트로 변환시켜줄 수 있다.*/
)

/*바벨을 이용하면 다음과 같이 코드를 작성할 수 있다*/
ReactDOM.render(
  <div>
  <div>
    <h1>주제</h1>
    <ul>
      <li>React</li>
      <li>Vue</li>
    </ul>
  </div>
  </div>,
  document.querySelector('#root')
)

결과

{a: "a"}
ReactDOM.render(
  <Component a="a"> 
  /* <div>와 같은 태그 외에 컴포넌트가 내부에서 props를 통해 데이터를 활용할 수 있다. */
  <div>
    <h1>주제</h1>
    <ul>
      <li>React</li>
      <li>Vue</li>
    </ul>
  </div>
  </div>,
  document.querySelector('#root')
)

JSX 문법

1. 최상위 요소가 하나여야 한다.

ReactDOM.render(
	<div>
  		첫번째 최상위요소
  	</div>
  	<div>
  		두번째 최상위요소
  	</div>
  /*
  위 처럼 최상위 루트에 div태그가 두 개 존재할 수없다. 
  최상위 루트는 하나여야한다.
  */
)

2. 최상위 요소 리턴하는 경우, ()로 감싸야 한다.
-> 최근에는 필수 규칙이 아니라 필요할 때만 ()로 감싸면 된다.

3. 자식들을 바로 랜더링 하고 싶으면 <>자식들</>를 사용한다 => Fragment

<> // 최상위 루트
  <div>
  	자식1
  </div>
  <div> 
    자식2
  </div>
</>

4. 자바스크립트 표현식을 사용하려면, {표현식}을 이용한다.

const title = "주제"
ReactDOM.render{
  <div>
    <h1>{"주제"}</h1> 
    <h1>{title}</h1> // 순수 js는 ${title} 사용
  </div>
}

5. if문은 사용할 수없다 => 삼항 연산자 혹은 논리연산자 && 사용

6. style을 props로 넣어 인라인 스타일링이 가능하다.

7. class대신 calssName을 사용

8.
(1)자식요소가 있으면, 반드시 닫아야한다.

<p>어쩌구</p> 

(2)자식 요소가 없으면 열면서 닫아야한다.

<br />

JSX 문법을 이용해 컴포넌트 만들기