YLog

구름톤 유니브☁️ 4기 FE 스터디

서론

이번 포스팅에서는 JSX란 무엇이고 리액트에서 화면에 요소를 표시하는 렌더링에 대해 간단히 알아보고자 합니다.

본론

1. JSX란?

JSX는 JavaScript + XML/HTML의 줄임말로,
JS 코드 안에서 마치 HTML처럼 태그를 쓸 수 있게 해주는 JS 문법 확장이다.

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

위 JSX 코드는 내부적으로 다음과 같은 JS 코드로 변환된다.

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

JSX의 장점

• 📦 간결한 코드: 보기 쉽고 쓰기 편함
• 👁️ 가독성 향상: HTML 구조처럼 보여서 코드 흐름 파악이 쉬움
• 🐞 버그 찾기 쉬움: 구조가 명확해 디버깅에 유리
• 🛡️ 보안성 강화: Injection 공격 방지 등 내부적으로 보안에도 강점

리액트에서 JSX를 사용하는 것이 필수는 아니나, 가독성과 코드 복잡성 면에서 매우 편리하여 많은 개발자가 JSX를 사용하고 있다.

2. Rendering Elements (렌더링 요소)

Elements는 어떤 물체를 구성하는 성분이라고 정의할 수 있다.

이는 리액트에서는 리액트 앱을 구성하는 요소라고 볼 수 있다.

즉, Element는 리액트 앱을 구성하는 가장 작은 블록을 의미한다.

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

이건 React Element라고도 불리며, HTML 요소와 비슷하지만 JS 객체 형태이다.

이 Element는 실제로는 이런 JS 객체라고 보면 된다.

{
  type: 'h1',
  props: {
    children: 'Hello'
  }
}

React Elements = Virtual DOM

리액트에서 <h1>Hello</h1> 같은 JSX는 결국 React Element라는 자바스크립트 객체로 변환된다.
그리고 이 React Element 들이 모여 만들어진 것이 바로 Virtual DOM이다.

Elements의 특징

• Immutable (불변성)

React Element는 불변성을 지니므로 한 번 만든 Element는 바꿀 수 없고, 변경되면 새로 만들어서 갈아끼운다.

즉, 변경해야할 사항이 있다면 새로운 Element를 만들어서 이를 re-rendering하게 된다고 보면된다.

Element Rendering

const element = <h1>안녕, 리액트!</h1>
ReactDOM.render(element, document.getElementById('root'));

리액트 렌더링은 Virtual DOM에서 실제 DOM으로 이동하는 과정

function tick(){
  const element = (
    <div>
    	<h1> 안녕, 리액트!</h1>
    	<h2> 현재 시간 : {new Date().toLocalTimeString()}</h2>
	</div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);

setInterval() 함수에 의해 1초마다 tick 함수가 실행될 때 마다 새로운 Element가 갱신되게 된다.

이는 기존 Element를 변경한다기보다는 매 초마다 새로운 Element를 생성하고 이를 re-rendering하는 개념으로 봐야한다.

마무리

이번 글에서는 JSX와 Rendering Element의 개념을 다뤄보았는데 전체적인 내용을 요약하자면

• JSX는 XML/HTML이 더해진 JS 문법 확장이고
• Element는 리액트 앱을 구성하는 가장 작은 단위
• React에서는 Virtual DOM과 비교 후, 필요한 부분만 실제 DOM에 반영하는 방식으로 빠르게 렌더링

읽어주셔서 감사합니다 🫡