리액트는 이제 클리셰인가?

AI 시대의 프론트엔드 개발

‍

클리셰란 무엇인가?

"클리셰(cliché)"라는 단어는 프랑스어에서 왔어요. 원래는 인쇄술에서 반복적으로 쓰이는 판형을 뜻했는데, 요즘은 너무 자주 반복되어 식상하게 느껴지는 표현이나 방식을 가리킵니다. 개발 세계에서 리액트(React)는 이제 그런 클리셰가 됐어요. 누군가 "프론트엔드 개발을 시작한다"고 하면, 열에 아홉은 "리액트로 하세요"라는 답이 돌아옵니다. 하지만 정말 리액트가 여전히 최선일까요? 아니, "최선"이라는 질문 자체가 지금 시대에 맞는 걸까요?

‍

리액트, 왜 이렇게 인기였을까?

리액트가 프론트엔드 개발에서 큰 인기를 끌었던 이유는 분명했어요. 몇 가지 핵심 장점을 살펴봤습니다.

• 재사용성: 컴포넌트 기반 구조 덕분에 버튼, 카드, 모달 같은 UI 요소를 한 번 만들어 여러 곳에서 재사용할 수 있었어요.
• 가독성: JSX라는 문법으로 HTML과 JavaScript가 자연스럽게 섞여서 코드가 직관적으로 보였습니다.
• 상태 관리: useState, useEffect 같은 훅(Hook)을 통해 복잡한 사용자 인터랙션을 깔끔하게 처리할 수 있었어요.
• 협업: 명확한 코드 구조와 생태계 덕분에 팀 단위 개발에서 빛을 발했습니다.

이런 장점들은 리액트를 프론트엔드의 "기본값"으로 만들었어요. 하지만 이 모든 장점은 사람이 직접 코드를 작성하고, 읽고, 수정해야 하는 시대에 기반을 두고 있었습니다.

‍

AI가 코드를 짜주는 시대엔 어떻게 될까?

2025년 현재, ChatGPT나 GitHub Copilot 같은 AI 도구는 단순한 보조를 넘어 개발의 핵심 파트너가 됐어요. 이제 개발자가 아니어도 간단한 요구만으로 AI가 코드를 만들어줍니다. 예를 들어, 채팅 앱의 메시지 전송 기능을 구현한다고 해볼게요.

const btn = document.getElementById("send");
btn.addEventListener("click", async () => {
    const msg = document.getElementById("input").value;
    const res = await fetch("https://api.ai-service.com/send", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: msg })
    });
    const data = await res.json();
    document.getElementById("chat").innerHTML += `<p>${data.reply}</p>`;
});

‍

이 코드는 바닐라 자바스크립트로 작성됐어요. 리액트 없이도 충분히 동작합니다. AI에게 "메시지 보내는 기능 만들어줘"라고 말하면 이런 결과물이 나와요. 복잡한 리액트 컴포넌트 구조나 상태 관리 없이도 원하는 기능을 구현할 수 있었습니다.

‍

리액트는 무겁고 복잡하다

리액트로 앱을 만들려면 어떤 과정을 거칠까요?

1. npx create-react-app으로 프로젝트를 생성해요.
2. 수십 개의 의존성을 설치합니다.
3. 라우팅(react-router-dom), 상태 관리(redux나 zustand), API 호출(axios) 등을 위한 라이브러리를 추가했어요.
4. Webpack이나 Vite로 번들링하고 배포를 준비합니다.

반면, 바닐라 JS로는 이렇게 간단해요:

<input id="input" />
<button id="send">Send</button>
<div id="chat"></div>
<script src="app.js"></script>

HTML 몇 줄과 JS 파일 하나로 끝났습니다. 초보자도 구조를 한눈에 파악할 수 있어요. 리액트의 복잡한 세팅 과정은 AI 시대에 점점 더 부담스럽게 느껴집니다.

‍

바닐라 JS란?

바닐라 자바스크립트(Vanilla JavaScript)는 프레임워크나 라이브러리를 전혀 사용하지 않고, 순수하게 브라우저에 내장된 자바스크립트 기능만으로 웹페이지를 구성하고 동작시키는 방식을 말해요. 예를 들어, 리액트나 제이쿼리 없이 document.querySelector()나 addEventListener() 같은 기본 API만을 활용해 HTML 요소를 조작하고, 이벤트를 처리하며, 데이터를 주고받는 식이죠. 가장 가볍고 빠른 방식이며, 브라우저 호환성과 성능을 직접 제어할 수 있는 장점이 있습니다.

‍

성능 측면: 바닐라 JS가 리액트를 앞선다

리액트는 Virtual DOM을 통해 DOM 업데이트를 최적화한다고 알려져 있어요. 하지만 작은 프로젝트나 정적 페이지에선 이런 최적화가 오히려 과잉일 수 있습니다.

리액트는 상태 업데이트 후 Virtual DOM 비교와 실제 DOM 반영 과정을 거쳐요. 단순히 텍스트 하나 추가하는 데 불필요한 오버헤드가 생길 수 있었습니다. 작은 규모의 프로젝트에선 바닐라 JS가 더 빠르고 효율적이에요.

‍

가독성과 재사용, 여전히 중요할까?

코드는 원래 "사람이 읽기 위한 컴퓨터 언어"였어요. 그래서 가독성과 재사용성이 중요했습니다. 하지만 AI가 코드를 작성하고 최적화하는 시대엔 이야기가 달라져요.

• 사람이 유지보수할 필요가 줄어든다면? 가독성보다 실행 속도가 더 중요해질 수 있어요.
• AI가 코드를 "다이어트"해준다면? 길고 지저분한 코드도 자동으로 깔끔해집니다.

이제는 사람이 코드를 이해할 필요 없이, AI가 "이거 고쳐줘"라는 명령만으로 수정할 수 있어요. 리액트의 강점이었던 구조화와 가독성은 점점 빛을 잃고 있습니다.

‍

내 경험: 웹플로우 + 바닐라 JS + ChatGPT

최근 웹앱을 만들면서 저는 리액트를 전혀 사용하지 않았어요. 대신 이런 조합을 선택했습니다:

• Webflow: UI 디자인과 퍼블리싱을 했어요.
• Xano: 백엔드와 데이터베이스를 구축했습니다.
• 바닐라 JS: ChatGPT가 작성해준 코드로 기능을 추가했어요.

결과는 놀라웠습니다. 개발자 없이 1개월 만에 MVP를 완성했어요. 유저 인터랙션, API 통신, 페이지 전환까지 모두 문제없이 구현됐습니다. 리액트 없이도 충분히 빠르고 유연한 결과물을 얻었어요.

‍

리액트 개발자의 높은 몸값

리액트를 쓰는 또 다른 단점은 비용이에요. 리액트 개발자는 높은 수요와 전문성 덕분에 몸값이 비쌉니다. 반면, 바닐라 JS로 간단한 기능을 구현하는 데는 초급 개발자나 AI로도 충분했어요. 스타트업이나 소규모 프로젝트에선 이런 비용 차이가 크게 다가옵니다.

‍

AI 시대, 멋진 기술보다 비즈니스 가설 검증이 중요하다

AI가 보편화된 세상에서는 멋있는 기술 스택보다 더 중요한 게 있어요. 바로 적은 비용으로 비즈니스 가설을 검증하는 겁니다. 불과 1~2년 전만 하더라도 MVP(Minimum Viable Product)를 만들려면 개발자를 고용해야 했어요. 프론트엔드 개발자, 백엔드 개발자를 따로 뽑고, 리액트 같은 복잡한 프레임워크를 세팅하는 데 시간과 돈이 많이 들었습니다. 하지만 이제는 달라졌어요.

AI 도구와 노코드 플랫폼 덕분에 비개발자도 아이디어를 빠르게 테스트할 수 있어요. 예를 들어, 저는 Webflow와 Xano, 그리고 AI가 작성한 바닐라 JS로 한 달 만에 제품을 뚝딱 만들었어요. 개발자를 고용하지 않아도 충분히 비즈니스 가설을 검증할 수 있었죠. 이제는 "최신 기술을 써야 한다"는 강박 대신 "최소한의 자원으로 시장을 확인하자"는 실용적인 접근이 더 가치 있어졌습니다.

‍

결론: 단순한 도구가 강해진다

리액트는 훌륭한 프레임워크예요. 대규모 프로젝트나 복잡한 상태 관리가 필요할 땐 여전히 유용합니다. 하지만 AI 시대엔 그 무거움과 복잡함이 단점으로 작용할 수 있어요. 반면, 바닐라 자바스크립트는:

• 더 빠르고 가볍습니다.
• AI와의 궁합이 뛰어나요.
• 배우고 적용하기 쉬웠어요.

이제 "리액트부터 깔자"는 습관 대신 "가장 간단한 방법부터 해보자"는 접근이 더 실용적이에요. 리액트는 더 이상 정답이 아닙니다. 새로운 질문을 던질 때예요:

"이걸 꼭 리액트로 만들어야 하나요?"