Rust Korea Hub

본 문서는 Dioxus 0.7 공식 학습 문서의 Introduction + Take a Tour(Tutorial) 섹션을 한국어로 상세 요약한 것입니다. 모든 코드 예제에는 친절한 한국어 주석을 포함하며, 초보자도 쉽게 따라올 수 있도록 개념을 하나씩 풀어 설명합니다. 학습이 끝나면 여러분은 “HotDog”(강아지 사진을 스와이프하는 틴더 스타일 앱)이라는 작은 풀스택 앱을 웹·데스크톱·모바일에 배포할 수 있습니다.

1.1 Dioxus에 오신 것을 환영합니다 (Welcome / Introduction)

Dioxus(디옥서스)는 Rust 프로그래밍 언어로 크로스 플랫폼 앱을 만들기 위한 프레임워크입니다. 하나의 코드베이스로 웹(Web), 데스크톱(Desktop), 모바일(Mobile) 어디서든 실행되는 앱을 작성할 수 있습니다. Dioxus는 React의 컴포넌트(Component)와 훅(Hook) 개념을 차용하면서도, 렌더링은 HTML과 CSS를 사용하여 웹 개발자에게 친숙합니다. Flutter처럼 자체 빌드 도구와 생태계를 제공하지만, 자체 스타일링 솔루션 대신 HTML/CSS를 그대로 사용한다는 점, 가상 머신(Virtual Machine) 없이 네이티브로 실행되어 시스템 API 호출 오버헤드가 없다는 점이 큰 차이점입니다. Dioxus의 비전은 “더 나은 Flutter” — 더 빠르고, 더 가볍고, 웹 네이티브인 프레임워크를 만드는 것입니다.

핵심 특징

단일 코드베이스 다중 플랫폼: 한 번 작성한 코드가 웹/데스크톱/모바일에서 모두 동작합니다.
React 영감의 반응형(Reactivity): React·SolidJS 같은 웹 프레임워크에서 배운 Signals 기반 상태 관리를 제 공합니다.
HTML/CSS 기반 마크업: Flutter·React Native처럼 새 스타일링 시스템을 만들지 않고 웹 표준을 그대로 사용합니다.
Rust 네이티브 실행: WASM 가상 머신 없이 네이티브로 동작하여 시스템 API를 zero-overhead로 호출합니다.
뛰어난 개발자 경험(DX): Subsecond Rust 핫 리로딩, WASM 번들 분할, 링커 기반 자산 번들링, WGPU 기반 HTML/CSS 렌더러 등 최신 기술을 직접 개발해 적용했습니다.
풀스택(Fullstack) 지원: 서버 함수(Server Functions)를 통해 프론트엔드와 백엔드를 하나의 프로젝트에서 작성할 수 있습니다.

첫 번째 예제 - 하이파이브 카운터

// Dioxus 사전 가져오기(prelude) - 가장 자주 쓰는 타입·함수를 한 번에

use dioxus::prelude::*;
pub fn App() -> Element {
 // use_signal: 컴포넌트 내부 상태를 저장하는 훅(Hook)
 // 값이 바뀌면 이 컴포넌트는 자동으로 다시 렌더링됩니다
 let mut count = use_signal(|| 0);
 // rsx! 매크로: HTML과 유사한 RSX 문법으로 UI를 선언합니다
 rsx! {
  // 중괄호 안의 문자열에 변수를 넣으면 자동으로 format!()이 적용됩니다
   h1 { "High-Five counter: {count}" }
  // onclick: 클릭 이벤트 핸들러 - 클로저(closure)를 전달
   button { onclick: move |_| count += 1, "Up high!" }
   button { onclick: move |_| count -= 1, "Down low!" }
 }
}

Dioxus는 누가 funding(자금 지원)하나?

Dioxus는 기업 스폰서십, 엔터프라이즈 지원 계약, 크라우드 펀딩(GitHub Sponsors), 벤처 캐피탈(Y Combinator)의 혼합 자금으로 운영됩니다. Apple, Meta, Google 같은 대형 기업에 종속되지 않는 “독립적인 더 나은 Flutter“를 지향하며, 향후 자체 배포 플랫폼인 Dioxus Deploy를 통해 자립할 계획입니다. Dioxus는 영원히

무료이며 오픈소스로 유지됩니다.

핵심 포인트

Dioxus = Rust + HTML/CSS + React 스타일 반응형 + 멀티 플랫폼
학습 문서는 Tutorial(튜토리얼) → Core Concepts(필수 개념) → Guides(가이드) 순으로 구성
Dioxus를 시작하려면 Rust 기초가 필요하지만, 비동기·수명(lifetime)·스마트 포인터 같은 심화 주제는 나중 에 배워도 됩니다.