노트

React 엘리먼트와 JSX

React Elements and JSX

프런트엔드#react · 연결된 개념 7개

쉽게 말하면

React 엘리먼트는 '여기에 이런 버튼을 놓아 주세요'라고 적은 설계도 한 장이에요. 진짜 건물인 DOM과 달리 종이라서 만들고 버리기가 거의 공짜라, 화면이 바뀔 때마다 새로 그려 이전 장과 비교해요.

비유가 깨지는 곳 설계도는 한번 그리면 고치지 않아요. props를 직접 바꾸지 않고 새 엘리먼트를 만들어요. 또 $$typeof 심볼 덕분에 서버에서 온 JSON이 엘리먼트인 척 위조되는 것도 막아요.

React 엘리먼트(React Element)는 "화면에 무엇을 그릴지"를 설명하는 불변의 평범한 JavaScript 객체다. JSX(JavaScript XML)는 이 객체를 만드는 문법이고, 컴파일하면 createElement(새 JSX 변환에서는 jsx()) 호출이 된다.

<button key="save" onClick={save}>저장</button>
// ≈ 결과 객체
{
  $$typeof: Symbol(react.transitional.element),  // React 19 기준 이름
  type: 'button',          // 문자열이면 DOM 태그, 함수면 컴포넌트
  key: 'save',             // 형제 사이의 정체성. props와 따로 보관
  props: { onClick: save, children: '저장' },
}
  • DOM(Document Object Model) 노드가 아니다. 엘리먼트는 설계도이고, 브라우저의 HTMLButtonElement가 실제 건물이다. 만들고 버리는 비용이 거의 없다(Virtual DOM)
  • 불변이다. 만든 뒤 props를 고치지 않는다. 화면이 바뀌면 렌더마다 새 엘리먼트 트리를 만들고 이전 트리와 비교한다(재조정(Reconciliation))
  • <Button />도 엘리먼트다. type에 문자열 대신 Button 함수가 들어갈 뿐이다
  • $$typeof는 보안 장치다. 심볼은 JSON(JavaScript Object Notation)으로 만들 수 없어서, 서버에서 온 JSON 객체가 엘리먼트인 척 위조되어 렌더되는 것을 막는다. RSC 페이로드(React Server Components Payload)에서는 이 자리를 "$" 문자열 마커가 대신한다
  • React 19부터 ref는 별도 필드가 아니라 props.ref로 들어간다
  • 엘리먼트를 바탕으로 React 내부 작업 단위인 Fiber가 만들어진다(Fiber 아키텍처). 바뀌지 않는 엘리먼트를 컴포넌트 밖으로 빼 재사용하는 최적화는 memo·useMemo·useCallback

실제 DOM에 그려지는 과정은 브라우저 렌더링 파이프라인와 이어진다.

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • React 서버 컴포넌트(RSC)

    React 서버 컴포넌트(React Server Components, RSC)는 서버에서만 실행되고, 컴포넌트 코드가 아니라 실행 결과(직렬화된 엘리먼트 트리)만 클라이언트로 보내는 컴포넌트다. Next.js App Router에서는 'use client'를 붙이지 않은 컴포넌트가 기본으로 서버 컴포넌트다.

  • React Portal

    포털(Portal)은 자식 요소를 부모 컴포넌트의 DOM(Document Object Model) 계층 밖에 있는 다른 DOM 노드에 렌더하는 React 기능이다(createPortal(child, container)). DOM 위치만 옮겨지고 React 트리에서의 위치는 그대로다.

  • Effect가 필요 없는 경우

    Effect는 외부 시스템과 동기화할 때 쓰는 탈출구(Escape Hatch)다. 렌더 중에 계산할 수 있는 값이나 사용자 이벤트 처리에 Effect를 쓰면 렌더가 한 번 더 일어나고 흐름이 꼬인다. React 공식 문서가 이런 경우를 따로 정리해 두었다.

  • Vue 3와 React 대응표

    React에 익숙한 개발자가 Vue 3(Composition API, script setup)를 빠르게 읽을 수 있게 짝지어 본 표. 가장 큰 차이는 Vue는 반응성(Reactivity)을 자동으로 추적해서 의존성 배열(Dependency Array)이 없다는 점이다.

  • React의 규칙과 렌더 순수성

    Rules of React는 React가 올바르게 동작하고 최적화하기 위해 코드가 지켜야 하는 규칙으로, 공식 문서가 세 가지로 정리한다. 핵심은 렌더가 순수한 계산이어야 한다는 것이다.

보기 옵션