[React] - JSX란? (개념, 변환 과정, 주요 문법)

JSX (Syntax Extenstion to JavaScript)란?

 

리액트를 처음 접할 때 헷갈렸던 부분이 JSX이다. js는 JavaScript의 확장자이기 때문에 익숙하지만, JSX는 생소했다.

JSX는, JavaScript XML의 약자로, 자바스크립트 코드 안에서 HTML과 유사한 문법을 사용할 수 있도록 지원해주는 문법 확장 도구이다. (JSX = JavaScript + HTML, XML)

=> 자바스크립트 내에서 HTML을 사용하기 위해서 JSX가 권장된다!

---

JSX 변환 과정

브라우저는 JSX 문법을 이해하지 못하기 때문에, JSX 코드를 JavaScript 코드로 변환해주는 과정을 내부적으로 거치게 된다. (Babel과 같은 컴파일러가 사용된다고 한다)

//JSX 코드
const element = <h1> Hello, React! </h1>

예를 들어 위와 같은 JSX 코드가 있다고 한다면, Babel 등의 도구가 아래와 같은 JavaScript 코드로 변환시켜준다.

// 자바스크립트 코드
const element = React.createElement('h1', null, 'Hello, React!');

// React.createElement : 리액트에게 어떤 요소를 만들어야 하는지 알려준다. 

---

중요한 JSX 문법들

1. 태그 규칙 - 반드시 하나의 부모 태그로 감싸야 한다.

JSX에서는, 모든 태그는 시작 태그<>가 있으면 닫힘 태그</>도 있어야 한다!

또한, 반드시 하나의 부모 태그로 감싸야 한다.

// 올바른 예
return (
  <div>
    <h1>안녕하세요!</h1>
    <p>Hello!</p>
  </div>
);


// 오류 발생
return (
  <h1>안녕하세요!</h1>
  <p>Hello!</p>
);

하지만 항상 <div></div>를 이용하여 감싸주는것은 결국 아무데도 쓰이지 않는 불필요한 부모 태그가 늘어난다는 단점이 있다. 그래서 Fragment로 감싸주는 방법을 사용하기도 한다. (아래 예시)

return (
  <Fragment>
    <h1>안녕하세요!</h1>
    <p>Hello!</p>
  </Fragment>
);

Fragment 문구 자체를 생략하여, 아래와 같이 <> </>만 있는 빈 태그로 써도 괜찮다.

return (
  <>
    <h1>안녕하세요!</h1>
    <p>Hello!</p>
  </>
);

---

2. 속성명은 camelCase 명명 규칙을 사용해야 한다.

html에서는 CSS 클래스 사용 시 "class"라고 하지만, JSX에서는 className으로 써주어야 한다.

function App() {
   const style = {
      backgroundColor: 'black',
      fontSize: '10px'
   }
  
   return (
      <div>
         <button className="btn">버튼</button>
         <div style={style}>Hello, World!</div>
      </div>
   );
}

html에서는 background-color 이라고 썼지만, JSX 문법에서는 backgroundColor 이라고 사용해야 한다!

마찬가지로 html에서 font-size라고 써야하지만, JSX에서는 fontSize라고 써야 한다.

 

주의

예외적으로 data-* 속성 (html에서 비표준 속성을 다룰 때 사용) 을 쓸 때는 camelCase가 아니라 기존의 HTML 문법을 사용해야 한다.

<button data-status="확인"> 버튼2 </button>

---

3. JSX에서 자바스크립트 사용하기

JSX에서 중괄호 { }를 이용하여 자바스크립트 값을 삽입하여 동적 데이터를 사용할 수 있다. 

const name = 'React';
const element = <h1>Hello, {name}!</h1>;

위처럼 JSX의 중괄호 안에는, 유효한 JavaScript 표현식이라면 다 넣을 수 있다. 

function userName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: '홍',
  lastName: '길동'
};

const element = (
  <h1> Hello, {userName(user)}! </h1>
);

위처럼 중괄호 안에 JavaScript 함수를 넣는 것도 가능하다.

---

4. JSX 문법 주석 처리 방법

function App() {
   return (
      <>
         {/* 주석 작성 */}
         <div>Hello World!</div>
      </>
   );
}

JSX에서는 //가 아니라 {/* ... */}의 형식으로 주석을 작성한다.

 

function App() {
   return (
      <>
          <div
          // 주석 내용
          > Hello, React! </div>
      </>
}

참고 : 태그 내부에서 위와 같이 주석을 사용할 수도 있다.