💡 출처1
💡 출처2

JSX는 아래의 이미지와 같이 하나의 파일에 자바스크립트와 HTML을 동시에 작성해줍니다.

const element = <h1>Hello, world!</h1>;

위에 희한한 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하며 JavaScript를 확장한 문법입니다.
그렇다면

JSX 란?

1. JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
2. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
3. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
4. JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
   

2. JSX 문법

1) 작성방법

1. 부모 요소 하나가 크게 감싸는 형태여야 한다.
   

• <div>, <Fragment> , <>
  요런형태로 많이 감싼다고 한다.

2. 한줄을 써줄 때는 <div>를 생략할 수 있다.
   

2) 자바스크립트 표현식

JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.

3) if문, for문 대신 삼항 연산자(조건부 연산자) 사용

if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다. 그렇기 때문에 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자(조건부 연산자)를 사용 한다.
1) 외부에서 사용
2) 내부에서
3) and연산자 사용

class App extends Component {
    render() {
        let name = 'React';
        return (
            <div>
                {
                    name === 'React' && <h1>This is React.</h1>
                }
            </div>
        );
    } 
}

4) 즉시실행함수 사용

4) JSX 스타일링

1) JSX에서 자바스크립트 문법을 쓰려면 {}를 써야하기때문에, 스타일을 적용할 때에도 객체 형태로 작성해야한다.

2) class 대신 className

5) JSX 특징

1) 대소문자를 구별한다.

JSX에서 HTML엘리먼트를 작성할 때는 반드시 소문자를 사용해야 하지만, 컴포넌트를 작성할 때는 컴포넌트 클래스 이름과 동일하게 PascalCase로 작성되어야 한다.

ReactDOM.render(
	<div>
		<MyCustomComponent/>
	</div>,
	document.getElementById('root')
);

2) 객체를 표현한다.

• Babel은 JSX를 React.createElement() 호출로 트랜스파일한다. 때문에 첫 번째 코드는 두 번째 코드로 트랜스 파일 된다.

// 개발자가 작성한 코드
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// babel로트랜스 파일된 코드
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

• React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행 후, 기본적으로 다음과 같은 객체를 생성한다.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
}

• 이렇게 생성된 객체를 “React 엘리먼트”라고 하며, 이는 화면에 표시하려는 항목에 대한 설명이라고 할 수 있다. React는 이러한 객체를 읽고 DOM을 구성하고 최신으로 유지하는 데 이러한 객체를 사용한다.