React와 JSX

React와 JSX

JSX란?

Html은 XML이라고 할 수 있고 JSX는 자바스크립트 XML을 의미한다.

npm start를 통해서 렌더링 전에 자바스크립트 코드를 더 브라우저 친화적인 코드로 변환시킨다.

JSX 구문은 일반적으로 브라우저에서 지원되지 않지만 우리가 코드를 작성하면 자동적으로 브라우저에서 작동하는 코드로 변환될 것이다.

그래서 두 가지 장점을 가지는데 하나는 브라우저에서 잘 작동하는 것이고 하나는 개발자가 작성하기 쉽다는 것이다.

JSX의 특징

1. JSX에서의 속성은 HTML 속성과 다를 수 있다.

function Form() {
  return (
    <div className="form">
      <label htmlFor="username">username</label>
      <input id="username" />
    </div>
  );
}

export default Form;

HTML에서 사용하는 class나 for 속성 같은 경우 자바스크립트의 예약어이기때문에 사용할 수 없다.

className, htmlFor와 같은 대체 속성을 사용한다.

2. JSX를 사용할 때는 반드시 한 개의 루트 요소를 가져야 한다.

function Profile() {
  return (
      <div className="name">이름</div>
      <div className="age">나이</div>
  );
}

export default Profile;

function Profile() {
  return (
    <div className="profile">
      <div className="name">이름</div>
      <div className="age">나이</div>
    </div>
  );
}

export default Profile;

두 개의 요소를 반환하면 오류가 발생한다.

그래서 주로 루트 요소로 <div>태그를 사용한다.

JSX를 사용할 때 하나의 루트 요소만 반환할 수 있는데 그 이유를 알기위해서 JSX의 작동방식을 이해해야한다.

import React from "react";

function Profile() {
  return React.createElement
    "div",
    { className: "profile" },
    React.createElement("div", { className: "name" }, "이름"),
    React.createElement("div", { className: "age" }, "나이")
}

export default Profile;

과거에는 항상 import React from ‘react’ 구문을 통해서 React를 임포트했어야 했다.

React 클래스의 createElement 메소드를 사용해서 렌더링하기때문이다.

createElement 메소드는 생성할 element, 속성, 자식 요소를 받아 실행된다.

위에 JSX방식의 코드를 createElement를 통해서 이렇게 표현할 수 있다.

import React from "react";

function Profile() {
  return React.createElement("div", { className: "name" }, "이름"),
    React.createElement("div", { className: "age" }, "나이")
}

export default Profile;

그래서 두 개의 요소만 반환할 수 없기 때문에 루트 요소 안에 자식 요소를 포함하여 반환하여야 한다.

3. JSX안에서 자바스크립트 코드를 사용하려면 { } 안에서 사용한다.

function Profile() {
  const name = "이름";
  const age = "나이";

  return (
    <div className="profile">
      <div className="name">{name}</div>
      <div className="age">{age}</div>
    </div>
  );
}

export default Profile;

{ } 안에 자바스크립트 문법의 변수 혹은 함수를 넣어서 사용할 수 있다.