💡JSX란?

1. 정의

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

2. JSX 문법

1. 감싸인 요소

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

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

2. 자바스크립트 표현

JSX가 내부에서 코드를 {}로 감싸면 자바스크립트 표현식을 작성할 수 있다.

3. 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, {} 안에 조건부 연산자(삼항 연산자)를 사용하면 된다.

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

특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 렌더링하지 않아야 하는 상황이 올 수 있다. 조건부 연산자도 가능하지만 AND 연산자를 사용하면 더 짧은 코드로 똑같은 작업을 할 수 있다.

5. undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다.
어떤 값이 undefined일 수도 있다면, OR 연산자 (||)를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

3. 예시

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

위의 코드는 아래와 같이 변환된다.

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