React Vs VanillaFront

React와 VanillaFront

React는 프론트엔드 UI 개발의 사실상 표준입니다. 스타트업부터 대기업까지 폭넓게 사용되고, 커뮤니티와 생태계가 방대합니다. VanillaFront는 그 스펙트럼 안에서 다른 자리를 지향하는 프레임워크입니다. 이 글에서는 두 도구의 특성을 항목별로 비교합니다.

한눈에 요약

항목ReactVanillaFront

성격	UI 렌더링 라이브러리	통합 프레임워크
컴포넌트 정의	함수·클래스 컴포넌트 + JSX	ES6 class + 선언적 config 트리
그리드·차트·다이어그램	별도 라이브러리와 조합	내장
상태 관리	Context / Redux / Zustand 등 조합	DataManager + 컴포넌트 상태
컴포넌트 격리	라이브러리별 방식 상이	Shadow DOM 격리
빌드 도구	번들러 필요 (Webpack, Vite 등)	불필요 (브라우저 직접)
AI 워크플로우 통합	별도 도구	VSCode Extension 내장
학습 곡선	JSX + hooks + 조합 라이브러리	표준 ES6 + config 트리

1. 라이브러리 vs 프레임워크

React는 UI를 렌더링하는 라이브러리입니다. 라우팅·상태 관리·폼·그리드·스타일 등은 프로젝트별로 라이브러리를 선택해 조합합니다. 조합의 자유도가 크다는 특성이 있습니다.

VanillaFront는 그리드·차트·폼·다이어그램·레이아웃이 한 패키지에 담긴 통합 프레임워크입니다. 200개 이상의 컴포넌트가 통일된 API로 제공됩니다.

이 차이는 프로젝트 성격에 따라 장단이 갈립니다.

• 조합 유연성이 중요한 프로젝트엔 React가 잘 맞습니다.
• 엔터프라이즈 화면 (그리드·폼·차트 중심) 을 빠르게 구성해야 하는 프로젝트엔 VanillaFront처럼 통합된 세트가 유리합니다.

2. 컴포넌트 정의 방식

React

function CustomerList() {
    const [customers, setCustomers] = useState([]);

    useEffect(() => {
        fetch('/api/customers')
            .then(r => r.json())
            .then(setCustomers);
    }, []);

    return (
        <table>
            <thead><tr><th>이름</th><th>지역</th></tr></thead>
            <tbody>
                {customers.map(c => (
                    <tr key={c.id}><td>{c.name}</td><td>{c.region}</td></tr>
                ))}
            </tbody>
        </table>
    );
}

VanillaFront

import Va from '../../lib/va.js';
import ItemService from '../../service/ItemService.js';

export default class CustomerList extends Va.View {
    constructor(){ super(arguments); }

    mounted(){
        this.onSearch();
    }

    onSearch(){
        ItemService.getItemList(this, {}, (me, ok, res) => {
            if(ok) me.getRef('refGrid').setData(res.data.list);
        });
    }

    config(){
        return {
            tagName: 'grid',
            ref: 'refGrid',
            columns: [
                { key: 'name',   title: '이름' },
                { key: 'region', title: '지역' }
            ]
        };
    }
}
Va.registerView('/view/customer/CustomerList', CustomerList);

차이:

• React는 렌더 함수 안에서 매번 화면을 계산합니다. hooks로 상태·부수효과를 다룹니다.
• VanillaFront는 config가 순수 데이터 트리로 화면 구조를 정적으로 표현합니다. 이벤트 핸들러는 메서드로 분리되어 있습니다.

VanillaFront의 특성: 화면 구조가 데이터로 표현되므로 코드 리뷰·AI 생성·시각 편집이 자연스럽습니다.

3. 엔터프라이즈 컴포넌트 접근

React 생태계에서는 그리드·차트·다이어그램 등을 각각 별도 라이브러리로 선택해 조합합니다. 라이브러리별로 API·업데이트 주기·라이선스 조건이 다릅니다.

VanillaFront는 이런 컴포넌트가 한 세트로 내장되어 있습니다.

컴포넌트React 접근VanillaFront

엔터프라이즈 그리드	별도 라이브러리 선택	내장
트리 그리드	별도 라이브러리 선택	내장
피벗 그리드	별도 라이브러리 선택	내장
차트	별도 라이브러리 선택	내장
다이어그램	별도 라이브러리 선택	내장
Excel 익스포트	별도 라이브러리 선택	내장

VanillaFront의 특성: 통일된 API 하나로 아래 컴포넌트를 다 활용할 수 있습니다.

• Grid, TreeGrid, DynamicGrid, PivotGrid — 프로존·다중헤더·집계·필터·엑셀 익스포트 내장
• Chart — Bar, Line, Area, Pie, Gauge, Stock, Radar, TreeMap, BoxPlot 등
• Diagram — 데이터플로우, BPMN, 스케줄 등
• ColorPicker, DatePicker, FileUpload 등 폼 컴포넌트

4. 상태 관리

React는 상태 관리를 여러 계층에서 다룹니다.

• 컴포넌트 로컬: useState
• 트리 공유: useContext
• 전역 상태: Redux, Zustand, Recoil 등
• 서버 상태: TanStack Query, SWR 등

각각 별도 라이브러리이며 프로젝트마다 조합이 다릅니다.

VanillaFront는 Va.DataManager 를 데이터 관리의 중심으로, 컴포넌트 참조는 getRef('name') 로, 서비스 호출은 함수 호출로 처리합니다. 하나의 프레임워크 표준 방식 안에서 완결됩니다.

VanillaFront의 특성: 상태 관리 라이브러리 선택 결정 없이 즉시 시작 가능합니다.

5. 빌드·개발 환경

React는 Node.js 생태계 위에서 번들러 (Webpack, Vite, Turbopack 등), 트랜스파일러, 린터, 스타일 처리기를 조합해 개발합니다. 모던 프론트엔드 툴체인의 이점을 활용할 수 있습니다.

VanillaFront는 빌드 도구 없이 ES6 모듈을 브라우저가 직접 로드하는 방식입니다.

VanillaFront의 특성:

• <script type="module"> 하나로 시작
• 파일 수정 후 브라우저 새로고침으로 즉시 반영
• 사내 인트라넷·폐쇄망 환경에서 파일 복사만으로 배포

어느 쪽이 좋다기보다 프로젝트 환경에 따라 다릅니다. 모던 툴체인 유지 여력이 있는 팀은 React 방식이 자연스럽고, 툴체인 부담을 줄이고 싶거나 배포 환경 제약이 있는 경우엔 VanillaFront의 No-Build 접근이 유리합니다.

6. 컴포넌트 격리

React 생태계는 스타일 격리 방식이 다양합니다. CSS Modules, CSS-in-JS (styled-components, emotion 등), Tailwind, Vanilla CSS 등 프로젝트별로 선택합니다.

VanillaFront는 Shadow DOM 기반 격리를 프레임워크 표준으로 사용합니다. 각 컴포넌트가 자체 shadow root를 가져 스타일이 외부와 완전히 분리됩니다.

VanillaFront의 특성:

• 기존 시스템 페이지에 iframe 없이 임베드해도 스타일 충돌 없음
• 다른 프레임워크와 같은 페이지에 공존 가능
• 한 페이지에 여러 테마 컴포넌트가 나란히 있어도 서로 영향 없음

7. AI 개발 워크플로우

VanillaFront의 config가 순수 데이터 트리로 표현된다는 점이 AI 코드 생성 도구와 잘 맞습니다. LLM이 JSON 유사 구조를 다루는 건 함수 컴포넌트·JSX를 다루는 것보다 예측 가능합니다.

VSCode Extension 안에 WYSIWYG 에디터가 통합되어 있어 다음 흐름이 자연스럽게 이어집니다.

• AI 도구 (ChatGPT, Claude 등) 에서 VanillaFront 코드 생성
• VSCode에서 파일 열면 에디터 영역에 즉시 시각 프리뷰
• 마우스로 수정 → 파일 자동 저장
• 컴포넌트 팔레트, Undo/Redo, 파일 탐색이 IDE 안에서 완결

이 조합은 VanillaFront가 처음부터 순수 데이터 config 구조로 설계된 결과입니다.

8. 학습 곡선

React는 JSX 문법, hooks 규칙, 조합한 라이브러리별 API를 각각 학습합니다. 생태계가 방대해서 자료가 풍부하지만 조합 결정도 그만큼 많습니다.

VanillaFront는 표준 ES6 문법과 선언적 config 트리만 익히면 시작할 수 있습니다. 자바스크립트 기본을 아는 개발자는 별도 방언 학습 없이 진입 가능합니다.

9. 어떤 팀에게 무엇이 맞나

두 도구는 서로를 대체하는 관계가 아니라, 각자 잘 맞는 프로젝트 유형이 다릅니다.

React가 잘 맞는 경우

• 소비자용 웹 서비스, 랜딩 페이지, 콘텐츠 사이트
• 컴포넌트 조합의 유연성이 중요한 프로덕트
• 모던 툴체인 (번들러, TypeScript 등) 을 팀 문화로 유지하는 조직
• 커뮤니티 생태계와 채용 시장 규모가 중요한 조직

VanillaFront가 잘 맞는 경우

• 그리드·폼·차트 중심의 사내 시스템·관리자 페이지·대시보드
• 통합 컴포넌트 세트가 필요한 엔터프라이즈 화면
• 빌드 파이프라인 없이 즉시 개발·배포하고 싶은 프로젝트
• AI 개발 워크플로우를 실무에 통합하고 싶은 팀
• 사내 인트라넷·폐쇄망 등 제한된 개발 환경
• 선언적 config 트리 스타일을 선호하는 개발 문화

결론

React와 VanillaFront는 지향점이 다른 도구입니다. 프로젝트 성격, 팀 구성, 개발 환경에 따라 선택이 달라집니다.

VanillaFront는 다음 자리를 지향합니다:

• 통합 프레임워크의 편의성 — 그리드·차트·폼을 한 세트로
• 모던 웹 표준 위에 구축 — ES6 클래스, Shadow DOM, ES 모듈
• 빌드 파이프라인 없이 즉시 사용 — 파일 수정 → 새로고침
• AI 개발 워크플로우 통합 — VSCode Extension + WYSIWYG 에디터