[React] JSX와 Elements 개념 정리

이번에 리액트를 활용한 프로젝트를 진행하기로 하면서, 프론트엔드의 기본 개념들도 어느 정도는 이해하고 있어야겠다고 느꼈다. 특히 JSX와 Elements는 리액트에서 가장 기초적인 부분이라서 먼저 정리해보았다.

---

JSX란 무엇인가?

JSX는 JavaScript XML의 약자로, 자바스크립트 코드 안에서 HTML 태그를 작성할 수 있게 해주는 문법이다. 겉으로 보기에는 HTML처럼 보이지만 실제로는 자바스크립트 문법 안에서 동작한다. 리액트에서는 이 JSX 문법을 사용해서 컴포넌트를 구성하게 된다.

예를 들면:

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

위 코드는 HTML처럼 보이지만, 브라우저가 바로 이해할 수 있는 건 아니고, Babel이라는 트랜스파일러가 이 코드를 다음과 같이 바꿔준다:

const element = React.createElement('h1', null, 'Hello, world!');

즉, JSX는 React.createElement() 함수를 좀 더 직관적이고 읽기 쉽게 작성할 수 있게 해주는 문법이라고 보면 된다.

---

JSX의 장점과 사용법

장점

1. 가독성: HTML과 유사한 문법을 사용하기 때문에 어떤 UI가 그려지는지 한눈에 파악할 수 있다.
2. 표현력: 자바스크립트의 모든 기능을 사용할 수 있어서 동적인 UI를 구성하기 유리하다.
3. React와의 궁합: JSX는 리액트와 완벽하게 통합되어 있어서 컴포넌트 기반 개발에 최적화되어 있다.

사용법 팁

JSX에서 자바스크립트 표현식을 사용하려면 중괄호 {}를 사용한다.

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

JSX에서는 반드시 하나의 부모 요소로 감싸야 한다.

// 잘못된 예시
return (
  <h1>Title</h1>
  <p>Paragraph</p>
);

// 올바른 예시
return (
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
);

---

Elements란?

React Element는 리액트 앱의 가장 작은 단위이다. HTML의 DOM 요소와 대응되며, 화면에 실제로 그려지는 것의 청사진 역할을 한다.

즉, JSX를 작성하면 내부적으로는 React Element 객체가 만들어지고, 이 Element가 실제 DOM으로 변환되어 브라우저에 렌더링된다.

const element = <h1>Hello</h1>;

위 코드에서 element는 실제 DOM 노드가 아니라, 리액트가 이해할 수 있는 일반 객체이다.

---

Elements의 특징 및 렌더링하기

1. 불변성: React Element는 한 번 생성되면 변경되지 않는다. 업데이트가 필요할 경우 새로운 Element를 생성해서 Virtual DOM과 비교한 후, 변경된 부분만 실제 DOM에 반영한다.
2. Virtual DOM 사용: 리액트는 성능 향상을 위해 Virtual DOM을 활용한다. React Element는 실제 DOM에 접근하기 전에 메모리 상의 가상 DOM 구조를 구성하고, 변경 사항이 있을 때만 필요한 부분만 업데이트한다.
3. 렌더링 방법:

ReactDOM의 render() 메서드를 사용하여 특정 DOM 요소에 React Element를 렌더링할 수 있다.

 

const element = <h1>Hello React!</h1>;
ReactDOM.render(element, document.getElementById('root'));

위 코드는 root라는 ID를 가진 DOM 요소 안에 element를 렌더링한다.