[C++ to TSX] 01. 진입점의 재해석: main() 함수와 컴포넌트(Component)

그동안 C++ 베이스로 로직을 구현하며 효율성에 집중해 왔지만, 최근 프론트엔드 환경에서 '바이브 코딩'의 한계를 느끼고 TSX(TypeScript XML)를 제대로 짚어보기로 했습니다. 첫 번째 포스팅은 C++의 정적인 사고방식을 현대적인 웹 UI의 선언적 사고방식으로 전환하는 'Entry Point'에 대한 정리입니다.

---

1. 프로그램의 시작점: main() vs Component

C++ 프로그램의 실행 흐름이 main() 함수에서 시작된다면, React/TSX 앱의 단위는 컴포넌트(Component)입니다. 단순히 문법의 차이를 넘어, 결과를 도출하는 '패러다임'의 차이를 이해하는 것이 핵심입니다.

📊 구조적 차이점 비교

특징	C++ (main.cpp)	TSX (App.tsx)
역할	실행 제어 및 비즈니스 로직 수행	상태(State)에 따른 UI 구조 반환
반환값	종료 코드 (int)	렌더링될 마크업 (JSX.Element)
패러다임	명령형 (Imperative)	선언형 (Declarative)

---

2. 코드 비교: 명령형 vs 선언형

C++에서 화면(콘솔)에 출력을 하려면 개발자가 직접 순서대로 '명령'을 내려야 합니다. 반면 TSX는 UI 자체를 함수의 리턴값으로 정의합니다.

1) C++: 명령형 프로그래밍

#include <iostream>
#include <string>

int main() {
    std::string name = "User";

    // 콘솔이라는 스트림에 데이터를 출력하라고 직접 명령
    std::cout << "Hello, " << name << "!" << std::endl;

    return 0;
}

2)TSX: 선언형 프로그래밍

import React from 'react';

function App() {
  const name: string = "User";

  // UI 구조 자체를 함수의 결과값으로 반환 (리턴이 곧 화면)
  return (
    <div className="container">
      <h1>Hello, {name}!</h1>
    </div>
  );
}

export default App;

---

3. 핵심 요약: "UI는 데이터의 함수다"

C++ 개발자에게 익숙한 방식은 데이터가 변할 때마다 출력 함수를 재호출하거나 화면을 지우고 다시 그리는 로직을 설계하는 것입니다. 하지만 TSX 환경에서는 "특정 데이터(State)일 때 UI는 이런 형태여야 한다"라고 함수 내부에서 정의만 해두면 됩니다. 즉, ‘이 데이터 상태일 때 UI가 이렇게 되어야 한다’는 ‘선언’만 미리 해둔다면 따로 UI를 업데이트하지 않아도 자동으로 업데이트가 된다는 것입니다.
개발자가 로직의 순서를 제어하는 것이 아니라, 데이터 상태에 따라 UI가 유기적으로 대응하는 구조입니다.