[React] JSX란? (정의, JSX 동작 원리, 문법)

WEB/React

[React] JSX란? (정의, JSX 동작 원리, 문법)

선서니 2023. 6. 18. 19:40

인프런의 [처음 만난 리액트] 강의를 학습하면서 공부 + 정리한 내용입니다

JSX란?

자바스크립트의 문법을 확장시킨 것으로 자바스크립트 파일 안에서 자바스크립트를 HTML 마크업처럼 사용할 수 있게 해줍니다. 즉, JSX는 JSX = JavaScript + XML(HTML) 이렇게 나타낼 수 있습니다.

const ele = <h1>Hello, world</h1>;

컴포넌트를 작성하는 다른 방법도 있지만 대부분의 리액트 개발자들을 JSX로 작성하는 걸 선호하고 대부분의 코드들도 JSX로 되어 있습니다!

JSX는 JS로 어떻게 변환되는 걸까?

하지만 브라우저는 JSX를 이해하지 못하기 때문에 Babel과 같은 컴파일러를 이용해 내부적으로 JSX를 자바스크립트로 변환합니다. React 17이전 버전에서는 이 역할을 React.createElement()가 했습니다. (React 17부터는 새롭게 이 부분을 개선했다고 합니다😎😎)

// JSX
const element = (
  <h1 className="greeting">
  	Hello World
  </h1>
)

// React.createElement() 사용
const element = React.createElement(
      'h1', 
      {className : 'greeting'}, 
      'Hello World'
     )

JSX를 사용해도 내부적으로 React.createElement()를 사용해 JavaScript로 변환되기 때문에 둘의 결과는 동일합니다. 이렇게 만들어진 결과로 다음과 같은 객체가 생성 됩니다.

const element = {
    type : 'h1',
    props : {
    	className : 'greeting',
        children : 'Hello World'
    }
}

리액트에서는 이렇게 생성된 객체를 element라고 부릅니다.

그리고 이런 객체들을 읽어서 DOM을 만드는데 사용하고 항상 최신 상태를 유지합니다.

JSX 문법

1. 하나의 루트 엘리먼트를 반환하기

컴포넌트에서 여러 엘리먼트를 반환하려면 하나의 부모 태그로 감싸야합니다!

아래 예제처럼 <div> 태그로 감쌀 수 있습나다.

<div> 
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

특정 태그를 사용하고 싶지 않으면 Fragment라고 하는 <>와 </>를 사용해서 감쌀 수도 있습니다.

Fragment는 브라우저 상 HTML 트리 구조에 영향을 미치지 않고 그룹화 하지 않은 것과 동일합니다.

2. 모든 태그 닫기

JSX에서는 명시적으로 태그를 닫아야합니다. <img> 태그처럼 자체적으로 닫는 태그도 <img />로 작성해야 합니다!

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</>

3. 거의 대부분 카멜 케이스로 작성하기

JSX는 자바스크립트로 바뀌고 JSX로 작성된 어트리뷰트는 자바스크립트 객체의 키가 됩니다. 이렇게 작성된 어트리뷰트를 종종 컴포넌트 안에서 변수로 읽어야 할 때가 있습니다. 하지만 자바스크립트에는 변수명에 대시를 포함하거나 class와 같은 예약어를 사용할 수 없습니다. 그래서 React에서 대부분의 HTML과 SVG 어트리뷰트를 카멜 케이스로 작성합니다.

ex) class는 예약어이기 때문에 React에서는 class 대신 className을 사용

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

4. { }(중괄호) 사용하기 :: JSX안에서 자바스크립트 사용하기

문자열 전달하기

문자열을 전달할 때는 큰따옴표 or 따옴표 사이에 문자열을 넣어서 전달합니다.

// src 속성과 alt 속성에 문자열로 값 전달하기
export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

자바스크립트 사용하기

자바스크립트 변수 또는 함수를 { } 안에 넣어서 사용합니다.

// name을 자바스크립트 변수로 선언 후 JSX에서 사용하기
export default function TodoList() {
  const name = 'Gregorio Y. Zar';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

5. 중괄호 사용 위치

JSX 내부에서는 중괄호를 두 가지 방법으로만 사용할 수 있습니다

1) JSX 태그 안에서 직접 텍스트로 사용

✅ 가능 :: <h1>{name}'s To Do List</h1>
🚫불가능 :: <{tag}>Gregorio Y. Zara's To Do List</{tag}>

2) = 기호 바로 뒤에 오는 속성으로 사용

src={avatar} // avatar라는 변수를 읽음
src="{avatar}" // "{avartar}" 라는 문자열을 전달

6. 이중 중괄호 사용 :: JSX에 객체 전달하기

JSX로 객체를 전달할 수도 있습니다. 자바스크립트에서 객체는 중괄호로 표현합니다.

따라서 JSX에 자바스크립트 객체를 전달하려면 다른 중괄호 쌍으로 객체를 감싸야합니다.

person={{ name: "Hedy Lamarr", inventions: 5 }} // 자바스크립트 객체를 중괄호 쌍으로 감싸기

// JSX에서 인라인 CSS를 사용할 때 객체를 전달 :: 이중 중괄호 사용
export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}