React 0-2 JSX

1. JSX란

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

---

2. JSX의 장점

1. 보기 쉽고 익숙하다.
2. 활용도가 더욱 높디.

 

---

3. JSX 문법

 

1. 감싸인 요소

 - Virtual DOM에서 컨포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다. 그런데  div요소를 사용하고 싶지 않으면 리액트 v16 이상부터는 <></>로 표현하고 사용할 수 있다.
 

2. 자바스크립트 표현

 - 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸면 된다. 자바스크립트 값을 JSX 안에서 한번 렌더링한다.
 

3. if문 대신 조건부 연산자(삼항 연산자)

 - JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수 없습니다. {} 안에 조건부 연산자를 사용한다. (조건부 연산자의 다른 이름은 삼항 연산자다.)
 

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

 - && 연산자를 사용하면 참일 시 랜더링 하는 기능이다.

return(
  <div>
    {true && <h1>메롱</h1>}
  </div>
);

 

5. undefined를 렌더링 하지 않기

6. class 대신 className 사용

7. 주석

 - JSX 내부에서 주석을 작성할 때는 {/*  */}와 같은 형식으로 작성하면 여러 줄로 작성할 수 있다. 그리고 시작 태그를 여러 줄로 작성할 때는 그 내부에서 // 과 같은 형태의 주석도 작성할 수 있다.
 

---

※ 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에는 없는 기능으로 node.js에서 지원하는 기능이다.
※ 렌더링이란 '보여 준다'는 것을 의미한다.