Leptos 시작하기

CharlieMoon·2026년 1월 28일
Rustleptos
post-thumbnail

Leptos는 Rust로 웹프론트 및 서버를 만들 수 있는 풀스택 프레임워크이다.
리액트랑 매우 비슷하다. 아마 리액트에서 영감을 받아 만든것 같다.
리액트의 JSX 처럼 Leptos는 RSX라는 명칭?을 사용한다 공식문서에 대놓고 JSX와 흡사하다고 설명을 해놓았다.

  • Leptos는 특징이 웹어셈블리 베이스로 동작한다.
  • 가상DOM을 사용하지 않고 직접 DOM노드를 수정한다.(리액트 보다 2배 빠른 성능을 내기도 한다.)
  • Rust의 타입시스템과 효율적인 메모리관리 덕분에 복잡한 UI에서도 굉장히 좋은 유저 경험을 선보인다.

가상돔을 사용하지 않고 DOM을 직접 컨트롤하는부분과 컴파일타임 프레임이라는 점이 Sevelte와 매우 유사한거 같다. (개인적으로 Svelte를 좋아한다.)

JS Framework Benchmark

Leptos React 비교 AI 정리

JS Framework Benchmark 2026 결과 기준

📊 주요 성능 지표 비교

1. DOM 조작 속도

벤치마크 항목LeptosReact비율
Create rows~1.0x~1.5-2.0xLeptos 50-100% 빠름
Replace all rows~1.0x~1.5-2.0xLeptos 50-100% 빠름
Partial update~1.0x~1.3-1.8xLeptos 30-80% 빠름
Select row~1.0x~1.2-1.5xLeptos 20-50% 빠름
Swap rows~1.0x~1.3-1.7xLeptos 30-70% 빠름
Remove row~1.0x~1.2-1.5xLeptos 20-50% 빠름

2. 메모리 사용량

메트릭LeptosReact
초기 메모리~2-3 MB~4-6 MB
10,000 rows 후~15-20 MB~30-40 MB
메모리 효율성~50% 더 적음기준

3. 번들 크기

항목LeptosReact
최소 번들 (gzipped)~15-25 KB~45-50 KB (React + ReactDOM)
크기 비교~60-70% 작음기준

🎯 성능 차이의 원인

Leptos의 강점

  1. 컴파일 타임 최적화

    • Rust 컴파일러가 빌드 시점에 최적화
    • Dead code elimination이 매우 효과적
    • 타입 안정성으로 런타임 체크 불필요

  2. Fine-grained Reactivity

    • 컴포넌트 전체가 아닌 변경된 부분만 업데이트
    • Virtual DOM 없이 직접 DOM 조작
    • Signal 기반의 효율적인 상태 관리

  3. WebAssembly

    • Near-native 성능
    • 효율적인 메모리 관리
    • GC 오버헤드 없음

React의 특징

  1. Virtual DOM

    • Diffing 알고리즘 오버헤드
    • 전체 컴포넌트 트리 재평가
    • 하지만 개발 경험은 뛰어남

  2. JavaScript Runtime

    • 인터프리터 언어의 한계
    • GC로 인한 pause
    • 타입 체크를 위한 추가 라이브러리 필요

  3. 거대한 생태계

    • 방대한 라이브러리와 도구
    • 커뮤니티 지원
    • 성숙한 개발 패턴

💡 실무 관점에서의 비교

Leptos를 선택하면 좋은 경우

  • ✅ 고성능이 중요한 애플리케이션 (게임, 데이터 시각화)
  • ✅ 모바일이나 저사양 기기 타겟
  • ✅ 번들 크기를 최소화해야 하는 경우
  • ✅ Rust 생태계 활용이 필요한 경우
  • ✅ 타입 안정성이 최우선인 프로젝트

React를 선택하면 좋은 경우

  • ✅ 빠른 프로토타이핑과 개발 속도가 중요
  • ✅ 방대한 서드파티 라이브러리 필요
  • ✅ 대규모 개발팀 (인력 수급 용이)
  • ✅ 기존 JavaScript 생태계 활용
  • ✅ 성능보다 개발 생산성이 우선

📈 실제 벤치마크 예시

10,000개 행 렌더링 시나리오

Leptos:  ~250ms
React:   ~450ms
차이:    +80% 느림 (React)

메모리 소비 (복잡한 SPA)

Leptos:  ~35MB
React:   ~75MB
차이:    +114% 더 많음 (React)

초기 로딩 시간

Leptos:  ~150ms (WASM 로드 포함)
React:   ~200ms
차이:    +33% 느림 (React)

🔄 마이그레이션 고려사항

Leptos 학습 곡선

  • Rust 문법 숙달 필요
  • Ownership/Borrowing 개념 이해
  • 컴파일 타임 에러 디버깅
  • 상대적으로 작은 커뮤니티

개발 도구

  • Leptos: cargo, trunk, VSCode rust-analyzer
  • React: npm/yarn, webpack/vite, 다양한 DevTools

🎬 결론

성능 우선순위가 높다면

Leptos는 벤치마크에서 일관되게 React보다 1.5-2배 빠른 성능을 보여주며, 특히 대량의 DOM 조작이나 복잡한 상태 업데이트에서 큰 차이를 만듭니다.

생산성과 생태계가 중요하다면

React는 여전히 검증된 선택이며, 성능 차이가 체감되지 않는 대부분의 웹 애플리케이션에서는 개발 속도와 유지보수성이 더 중요할 수 있습니다.

이제 본격적으로 Leptos를 시작해보자

환경구성

# Trunk는 Rust 용 WASM 웹 응용 프로그램 번들러
cargo install trunk

Rust 프로젝트 생성

# 프로젝트 이름을 ui로 만든다.
cargo new ui

# 이동
cd ui

# 구조 확인
tree 

├── Cargo.toml
└── src
    └── main.rs

target 설치

#웹어셈블리 바이너리 형식으로 빌드할 수 있도록 필요한 도구(타겟)를 설치
rustup target add wasm32-unknown-unknown

의존성 추가

Cargo.toml에 의존성을 추가해준다.

[package]
...

[dependencies]
# leptos 추가 (Client Side Rendering을 하는 앱을 위해 features를 csr 로 하였다.)
leptos = { version = "0.8.15", features = ["csr"] }

index.html 생성

프로젝트 최상단에 index.html을 만든다.

├── Cargo.lock
├── Cargo.toml
├── index.html # 생성
└── src
    └── main.rs

index.html

<!doctype html>
<html>
    <head></head>
    <body></body>
</html>

main.rs 작성

use leptos::prelude::*;

fn main() {
    leptos::mount::mount_to_body(|| view! { <p>"Hello, world!"</p> })
}

실행해보기

# 실행
trunk serve

터미널에 표시된 주소를 열면 잘 내용이 잘 나오는걸 볼 수 있다.

profile
CharlieMoon
산만한 개발자의 노트
이전 포스트

Synology NAS에 개발환경 세팅하지 말자

다음 포스트

WAV 확장자

1개의 댓글

comment-user-thumbnail
전화하는라이언
약 18시간 전

음 근데보니깐, 프론트 처음로딩시 wasm 바이너리때문에 얘가 커지면 초기로드가 좀 느린거같네요

답글 달기