Delphi는 오랫동안 기업용 데스크톱 애플리케이션 개발에 사용되어 온 언어다. 하지만 현대 웹 환경으로의 전환이 필요한 시점, 자연스럽게 React + TypeScript 마이그레이션을 고려하게 된다. 이 글에서는 Delphi의 핵심 패턴들이 React + TypeScript에서 어떻게 대응되는지 정리한다.
1. 언어 개념 대응표
Delphi | React + TypeScript |
TForm | 컴포넌트 (.tsx) |
TButton, TLabel 등 | JSX 엘리먼트 |
procedure, function | 함수 / 화살표 함수 |
var, const | let, const |
record | interface / type |
class | class / 함수형 컴포넌트 |
property | props / state |
event handler | 이벤트 핸들러 함수 |
TStringList | string[] / Array<string> |
TList<T> | T[] / Array<T> |
2. 타입 시스템 변환
Delphi는 정적 타입 언어다. TypeScript로 전환할 때 타입 대응이 핵심이다.
Delphi 타입 → TypeScript 타입
// Delphi
var
name: string;
age: Integer;
price: Double;
isActive: Boolean;
items: TArray<string>;
Pascal
복사
// TypeScript
const name: string = '';
const age: number = 0;
const price: number = 0.0;
const isActive: boolean = false;
const items: string[] = [];
TypeScript
복사
Integer, Cardinal, Double, Single 등 Delphi의 다양한 숫자 타입은 TypeScript에서 모두 number로 통일된다.
3. Record → Interface/Type
Delphi의 record는 TypeScript의 interface 또는 type으로 변환한다.
// Delphi
type
TUser = record
ID: Integer;
Name: string;
Email: string;
IsAdmin: Boolean;
end;
Pascal
복사
// TypeScript
interface User {
id: number;
name: string;
email: string;
isAdmin: boolean;
}
// 또는 type alias
type User = {
id: number;
name: string;
email: string;
isAdmin: boolean;
};
TypeScript
복사
필드명은 Delphi의 PascalCase에서 TypeScript의 camelCase로 변환하는 것이 관례다.
4. TForm → React 컴포넌트
Delphi의 TForm은 React 함수형 컴포넌트로 변환된다. OnCreate는 useEffect로, 멤버 변수는 useState로 대응된다.
// Delphi
type
TMainForm = class(TForm)
btnSubmit: TButton;
edtName: TEdit;
lblResult: TLabel;
procedure FormCreate(Sender: TObject);
procedure btnSubmitClick(Sender: TObject);
private
FUserName: string;
end;
procedure TMainForm.FormCreate(Sender: TObject);
begin
FUserName := '';
end;
procedure TMainForm.btnSubmitClick(Sender: TObject);
begin
lblResult.Caption := 'Hello, ' + edtName.Text;
end;
Pascal
복사
// React + TypeScript
import { useState, useEffect } from 'react';
const MainForm: React.FC = () => {
const [userName, setUserName] = useState<string>('');
const [result, setResult] = useState<string>('');
useEffect(() => {
// FormCreate에 해당
setUserName('');
}, []);
const handleSubmit = () => {
setResult(`Hello, ${userName}`);
};
return (
<div>
<input
value={userName}
onChange={(e) => setUserName(e.target.value)}
placeholder="이름 입력"
/>
<button onClick={handleSubmit}>Submit</button>
<label>{result}</label>
</div>
);
};
export default MainForm;
TypeScript
복사
5. 이벤트 핸들러 변환
Delphi의 이벤트 핸들러 패턴은 React의 이벤트 핸들러와 구조가 유사하지만, Sender: TObject 파라미터 방식이 다르다.
// Delphi
procedure TForm1.ButtonClick(Sender: TObject);
begin
ShowMessage((Sender as TButton).Caption);
end;
Pascal
복사
// React + TypeScript
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
alert(e.currentTarget.textContent);
};
// JSX
<button onClick={handleClick}>클릭</button>
TypeScript
복사
주요 이벤트 타입 대응:
Delphi 이벤트 | React 이벤트 타입 |
TNotifyEvent (OnClick) | React.MouseEvent |
TKeyEvent (OnKeyPress) | React.KeyboardEvent |
TMouseEvent (OnMouseMove) | React.MouseEvent |
OnChange (TEdit) | React.ChangeEvent<HTMLInputElement> |
6. 클래스 → 함수형 컴포넌트 + Hooks
Delphi의 클래스 기반 구조를 React Hooks로 전환하면 코드가 훨씬 간결해진다.
// Delphi - 데이터 로드 패턴
procedure TForm1.LoadUsers;
var
UserList: TObjectList<TUser>;
begin
FIsLoading := True;
try
UserList := FUserService.GetAll;
FUsers := UserList;
finally
FIsLoading := False;
Refresh;
end;
end;
Pascal
복사
// React + TypeScript
const [users, setUsers] = useState<User[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(false);
const loadUsers = async () => {
setIsLoading(true);
try {
const userList = await userService.getAll();
setUsers(userList);
} finally {
setIsLoading(false);
}
};
TypeScript
복사
7. Props를 통한 컴포넌트 간 데이터 전달
Delphi에서 폼 간 데이터 전달은 주로 public 프로퍼티나 글로벌 변수를 사용했다. React에서는 props가 공식적인 방법이다.
// Delphi - 다른 폼에 데이터 전달
var
DetailForm: TDetailForm;
begin
DetailForm := TDetailForm.Create(Self);
DetailForm.UserID := FSelectedUserID;
DetailForm.ShowModal;
end;
Pascal
복사
// React + TypeScript
interface DetailFormProps {
userId: number;
onClose: () => void;
}
const DetailForm: React.FC<DetailFormProps> = ({ userId, onClose }) => {
return (
<div>
<p>User ID: {userId}</p>
<button onClick={onClose}>닫기</button>
</div>
);
};
// 부모에서 사용
<DetailForm userId={selectedUserId} onClose={() => setShowDetail(false)} />
TypeScript
복사
8. 마이그레이션 체크리스트
Delphi 타입 → TypeScript 타입 매핑 정의
record / class → interface / type 변환
TForm → 함수형 컴포넌트 변환
멤버 변수 → useState 훅으로 대체
OnCreate / OnShow → useEffect 처리
이벤트 핸들러 시그니처 변환
전역 변수 → Context API 또는 상태관리 라이브러리로 교체
DB 직접 접근 → REST API / GraphQL 레이어 도입
동기 처리 → async/await 기반 비동기 처리로 전환
마치며
Delphi와 React + TypeScript는 패러다임이 다르지만, 컴포넌트 기반 UI, 타입 시스템, 이벤트 핸들링이라는 공통된 개념을 공유한다. 익숙한 패턴의 대응 관계를 파악하면 마이그레이션 부담이 크게 줄어든다. 특히 Delphi의 명시적 타입 선언 스타일은 TypeScript와 잘 맞아떨어지므로, 타입 설계부터 시작하는 것을 추천한다.