[데브코스] React와 JSX, UI 패러다임의 전환

React는 프론트엔드의 사고방식을 완전히 바꾼 라이브러리이다. DOM을 직접 다루는 imperative 방식에서 컴포넌트를 통해 UI를 선언적으로 구성하는 방식으로 전환시켰다. 그리고 그 핵심에는 JSX라는 독특한 문법이 있다. 

 

JSX는 처음보면, HTML과 Javascript를 섞은 조금 이상한 모습(ㅎㅎ)으로 보인다. 하지만 내부적으로는 놀라운 일관성과 효율성을 갖춘 문법이다. 오늘은 React와 JSX가 왜 등장했고, 어떤 철학과 구조로 설계되었는지 알아본다

---

React의 등장 배경 - DOM 지옥 탈출하기

2010년대 초반, 프론트엔드의 복잡도는 급격히 증가했다. DOM 조작은 점점 어려워졌고 상태와 뷰를 수동으로 동기화하는 코드가 넘쳐났다.

const div = document.createElement('div');
div.innerText = user.isLoggedIn ? '로그아웃' : '로그인';
parent.appendChild(div);

• 상태가 바뀌면? -> 직접 DOM 다시 수정해야 함
• UI가 복잡해질수록 코드도 기하급수적으로 늘어났다.

이런 문제를 탈출하기 위해, React는 다음과 같은 발상을 도입하였다.

상태가 바뀌면 전체 UI를 다시 렌더링해도 되지 않을까?

이 접근 방식을 가능하게 한 것이 Virtual DOM이다. 실제 DOM 대신 메모리 상의 DOM 트리를 만들어서 변경 전후를 diffing하고, 실제 DOM에는 최소한의 변경만 적용하는 방식이다.

 

이 철학을 기반으로, React는 다음을 제안하였다.

• UI = 상태에 따른 함수의 결과
• 변경이 생기면 컴포넌트 다시 호출(re-render)
• React가 효율적으로 DOM patching 수행

 

JSX의 등장 - UI는 데이터 구조다

React의 핵심은 UI를 함수로 표현하는 것이다.

function Button(props) {
  return React.createElement('button', null, props.label);
}

그치만 이런 코드는 너무 장황하다. 결국 HTML과 비슷한 UI 구조를 표현하고 싶어진다. 그래서 등장한 것이 JSX이다.

 

JSX는 syntactic sugar

<Button label="Click me" />

는 다음과 같은 JS코드로 변환된다.

 

React.createElement(Button, { label: 'Click me' });

즉, JSX는 React.createElement 호출을 짧게 쓰는 문법이다. HTML처럼 보이지만, 실제로는 Javascript 코드다. 그래서 조건문, 반복문, 변수 삽입이 자유롭다.

 

JSX의 진짜 장점 - 선언형 UI와 트리 구조 표현

JSX의 등장은 단순히 문법의 편의성을 넘어서, UI를 트리 형태의 데이터 구조로 명시할 수 있게 만들었다.

 

UI를 하나의 트리로 바라보는 사고방식

<App>
  <Header />
  <Main>
    <Article />
    <Sidebar />
  </Main>
  <Footer />
</App>

이건 단순한 태그 나열이 아니다! 이 자체가 UI 트리다. 데이터로 볼 수 있고, 순회하거나 변환하거나 비교할 수 있는 구조다. React는 이를 내부적으로 Virtual DOM으로 구성한 후 diffing & patching을 수행한다.

 

Babel 트랜스파일링

브라우저는 JSX를 이해하지 못한다. 따라서 코드는 반드시 babel을 통해 변환되어야 한다.

<Button label="Hi" />

⇓

React.createElement(Button, { label: 'Hi' });

이 과정 덕분에 우리는 HTML-like 문법으로 컴포넌트를 구성할 수 있고, 동시에 타입 시스템과 ESLint, Prettier 같은 도구도 함께 사용할 수 있다.

 

JSX 내부 동작 방식

JSX를 사용하면 결국 아래와 같은 객체가 만들어진다.

{
  type: 'button',
  props: {
    children: '클릭',
    onClick: () => alert('clicked'),
  },
  key: null,
  ref: null,
  $$typeof: Symbol(react.element)
}

즉, JSX는 ReactElement를 생성하는 일종의 빌더다. 이 ReactElement는 Virtual DOM 트리의 노드가 되며, 리렌더링 시 diff의 기준이 된다.

 

JSX vs Template 문법

Vue, Angular는 HTML 템플릿 기반 문법을 사용한다. 반면 React는 JSX를 통해 UI도 Javascript의 일부로 간주한다. 이 방식에는 강력한 장점이 있다.

//조건문
{isLoggedIn && <LogoutButton />}

//반복문
{items.map(item => <Item key={item.id} {...item} />)}

//상수 분리
const controls = <ControlPanel />;
return <Header right={controls} />;

템플릿 문법에서는 이 모든 걸 별도의 문법으로 해결해야 하지만, JSX는 JS로 해결한다.

 

JSX의 단점 

• HTML과 비슷하나 완전히 같지는 않다.
• Babel 설정 필요(트랜스파일 단계 추가)
• 타입스크립트와 함께 쓰려면 추가 설정 필요

하지만 대부분 단점이라고 할만한 것들은 환경 셋업 문제고, 딱히 단점도 아니긴 함. 장기적으로 보면 JSX의 일관성과 확장성은 이점이 더 크다.

---

React와 JSX는 UI를 데이터처럼 다룰 수 있게 만든 사고방식의 전환이다. imperative → declarative, mutable DOM → immutable state, 수동 렌더링 → 자동 리렌더링으로의 전환이다.

JSX는 이 패러다임을 표현하는 가장 직관적인 방법이다. 단순한 문법이 아니라, UI를 코드로 서술하는 새로운 언어다. React를 제대로 이해하고 쓰기 위해서는 JSX가 단순한 HTML이 아님을 명확히 인식해야 한다.