JSX 소개

🔍 JSX란?

React에서는 본질적으로 렌더링 로직이 UI 로직과 연결된다는 사실을 받아들입니다.

• UI 로직 - 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등

🔸 컴포넌트

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 느슨하게 연결된 유닛으로 관심사를 분리합니다.

🔍 JSX: JavaScript에 마크업 넣기

웹은 HTML, CSS, JavaScript를 기반으로 구축되었습니다.

• 콘텐츠를 HTML로, 디자인을 CSS로, 로직을 JavaScript로 유지했으며 종종 별도의 파일로 보관했습니다.

🔍 JSX에 표현식 포함하기

// name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용
const name = "Josh Perez";
const element = <h1>Hello, {name}</h1>; // Hello, Josh Perez

• JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다.

//  JavaScript 함수 호출의 결과인 formatName(user)을 <h1> 엘리먼트에 포함했습니다.
function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const user = {
  firstName: "Harper",
  lastName: "Perez",
};

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

🔍 JSX 속성 정의

// 어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다.
const element = <a href="https://www.reactjs.org"> link </a>;

// 중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수도 있습니다.
const element = <img src={user.avatarUrl}></img>;

🔸 JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다.

예를 들어, JSX에서 class는 className

🔍 JSX로 자식 정의

태그가 비어있다면 XML처럼 /> 를 이용해 바로 닫아주어야 합니다.

// BAD
const element = <img src={user.avatarUrl}></img>;
// GOOD
const element = <img src={user.avatarUrl} />;

JSX 태그는 자식을 포함할 수 있습니다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

🔍 JSX는 객체를 표현합니다.

Babel은 JSX를 React.createElement() 호출로 컴파일합니다.

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

// 위 예시와 동일합니다.
const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
);

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: "h1",
  props: {
    className: "greeting",
    children: "Hello, world!",
  },
};

• 이러한 객체를 “React 엘리먼트”라고 하며, 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 됩니다.
• React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용합니다.

출처

• React - JSX_소개