🔍 JSX

JSX는 자바스크립트 확장 문법이며 React Element를 생성한다.
코드가 번들링되는 과정에서 바벨이 사용되어 일반 자바스크립트 형태의 문법으로 변환된다.

🧐 특징

📣 보기 쉽고 익숙하다.

기존 자바스크립트 코드와 비교해봤을 때 가독성이 좋고 기존 HTML 코드 작성하는 것과 비슷하여 코드 작성에도 편리한다.

📣 리액트 요소 쉽게 만들기

HTML로 DOM요소를 만드는 듯이 DOM을 쉽게 생성할 수 있다.

JSX를 사용하지 않았을 때

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

JSX

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

👀 문법

1. 부모요소로 감싸기

컴포넌트안에 여러가지 요소가 있다면 부모 요소로 감싸줘야 한다.
이 때 div 태그를 사용할 수도 있겠지만 React.Fragment(<>)를 사용할 수 도 있다.

부모 태그로 감싸주는 이유는 Virtual DOM이 DOM 변화를 감지할 때 효율적으로 감지하기 위해서이다. 

컴포넌트 내부의 구조는 하나의 DOM 트리구조로 이루어져야한다는 규칙이 있어서이다.

2.중괄호{}안에는 js표현식

JSX안에서는 DOM요소뿐 아니라 자바스크립트 표현식도 쓸 수 있다. 단,
중괄호{}안에 표현식을 써야한다는 규칙이 있다.

또한 표현식은 값으로 여겨지는 표현식만 취급할 수 있기 때문에
if문과 for문과 같은 문을 쓸 수 없다.

때문에 조건문을 사용하고 있을 때에는 값으로 쓸 수 있는 삼항연산식을 사용할 수 있다.

이를 통해 조건에 맞는 조건부 렌더링을 함으로써 렌더링 할 수 있는 스펙트럼을 넓힐 수 있다.

• 표현식의 값이 false면 브라우저에 아무것도 나타나지 않음.
  주의할 것 : 암묵적 타입변환 값인 0(falsy)은 브라우저에 나타남.

3. undefined

컴포넌트의 반환값이 undefined 경우에는 렌더링되지않고 에러가 발생한다.

4. 인라인 스타일링

DOM요소에 인라인 스타일링을 하기 위해서는 우선 요소에 style attribute를 부여해주고 attribute 값으로 객체를 입력한다.
이 때 각 스타일의 키는 카멜케이스로 작성한다.

• 예) background-color => backgroundColor

아니면 style값을 따로 객체값으로 저장해두어 쓸 수 있다.
style양이 많을 경우 보통 후자의 방법을 쓴다.

5. class 대신 className

HTML에서 클래스명을 입력할 때에는 class를 attribute로 줬지만
JSX에서는 attribute로 className으로 지정한다.