🟡 JSX 란?

JavaScript XML의 약자로, React에서 UI를 구성하기 위한 문법이다.
JSX(JavaScript XML)는 JavaScript 에 XML 을 추가해 확장한 문법으로,
JSX를 사용하면, React 컴포넌트 안에서 HTML과 유사한 코드를 작성할 수 있다.
이를 통해 코드의 가독성을 높이고, 작성하기 쉬운 UI를 만들 수 있다.

• 즉, JSX는 자바스크립트 코드를 HTML처럼 표현할 수 있는 React 엘리먼트를 생성하는 언어입니다.
• JSX 는 리액트로 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 자바스크립트 형태의 코드로 변환된다.

function App() {
	return (
      <h1>Hello!</h1>
    );
}

위와 같이 작성할 수 있다. 이렇게 작성한 코드는 아래와 같이 변환된다.

function App() {
	return React.createElement("h1", null, "Hello!");
}

🟡 사용방법

- 규칙

JSX 문법을 사용하기에 앞서, 규칙을 알아보자.

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.

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

function App() {
	return (
      <div>
         <h1>Hello!</h1>
      </div>
    );
}

2. 자바스크립트 표현식은 {} 중괄호안에 작성해야한다.

• JSX 안에서도 자바스크립트 표현식을 사용할 수 있지만, 작성하려면 꼭 {} 중괄호 안에 작성해주어야한다.

function App() {
	const age = 12;
	return (
      <div>
         <h1>Hello!</h1>
         <h2>I'm {age} years old</h2>
      </div>
    );
}

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

• if 문과 for 루프는 JavaScript 표현식이 아니므로 jsx 내부에서 사용할 수 없다.
• 따라서 조건부에 따른 렌더링 시 {} 안에서 삼항 연산자(조건부 연산자)를 사용해야한다.
• 꼭 삼항 연산자가 아니더라도 AND 연산자(&&)를 사용해도 되고,
  if 를 사용하고 싶다면 즉시실행 함수를 사용하면 된다.

function App() {
	const is = true;
	return (
      <div>
         <h1>Hello!</h1>
         { is ? <p>nice to meet you!</p> : <p>bye!</p> }
      </div>
    );
}

4. camelCase 프로퍼티 명명 규칙을 사용 한다.

이는 css 스타일링, class 이름을 붙일때 꼭 기억해야한다.
1) JSX CSS 문법

• JSX 에서 자바스크립트 문법을 쓰려면 {} 를 써야하기 때문에,
  스타일을 적용할 때에도 객체 형태로 넣어주어야하고,
• 꼭 카멜 표기법으로 작성해야 한다.( font-size => fontSize )

function App() {
	const is = true;
    const style = {
		fontSize: '18px'
	}
	return (
      <div>
         <h1 style={style}>Hello!</h1>
         { is ? <p>nice to meet you!</p> : <p>bye!</p> }
      </div>
    );
}

2) class 대신 className

• 일반 HTML 에서 CSS 클래스를 사용할때는 class 라는 속성을 사용하지만,
  JSX 에서는 className 을 사용해야한다.

function App() {
	return (
      <div>
         <h1 className="hello">Hello!</h1>
      </div>
    );
}

5. 주석은 {/* */} 으로 작성

• JSX 내에서 주석은 {/* ... */} 으로 작성해야한다.

function App() {
	return (
      <div>
         {/* 이것은 안녕이다 */}
         <h1 className="hello">Hello!</h1>
      </div>
    );
}

---

참고자료_1