경험이 적은 엔지니어가 AI에게 React를 쓰게 하면, 진화에서 뒤처진다는 설

안녕하세요, 슈토입니다. 지난번에는 「취업 준비 중인 주니어 엔지니어가 면접에서 절감한 『실력 부족』 이야기」를 썼습니다. 읽어주신 분들, 감사합니다.

그 기사의 마지막에, 「AI에 의존해서 속도만 내지 않고, 하나하나 제대로 이해한 뒤에 다음으로 넘어간다」라고 적었습니다. 이번에는 그 속편, 혹은 관련 있는 또 다른 깨달음입니다.

아르바이트와 개인 개발로 React와 TypeScript를 작성하고 있습니다. 엔지니어 경력은 1년 정도이며, 솔직히 React 자체가 진화하고 있다는 것을 「실시간으로 체감하는」 경험은 별로 없습니다. 공부를 시작했을 무렵과 지금, 제 안에서는 그렇게 큰 차이를 느끼지 못하고 있었습니다.

하지만, 최근 문득 깨달았습니다.

AI에게 React 코드를 쓰게 하면, 꽤 높은 확률로 「오래된 방식」이 돌아온다.

폼(Form)의 상태가 수동 useState로 가득 차 있거나, 로딩 관리가 isLoading의 수동 전환이거나. 그것이 저에게는 "보통"이 되어 있었지만, 자세히 조사해 보니 React 19에서는 더 심플하게 쓸 수 있는 방법이 마련되어 있었습니다.

경험이 적은 저는 무엇이 오래되었고 무엇이 새로운지 판단하는 기준이 없기 때문에, AI가 작성한 코드를 그대로 「이것이 React의 방식이다」라며 흡수해 버리고 있었다는 뜻입니다.

이 기사에서는 그 깨달음을 **문의 양식(Contact Form)**이라는 구체적인 예시로 확인해 보겠습니다.

참고로 이번에 AI에게 쓰게 한 것은, **현시점 최신인 ChatGPT(GPT-5.5)**입니다. 「오래된 모델이라서 그런 거 아냐?」라는 태클이 들어올 수 없는 버전입니다.

마찬가지로 「AI에게 쓰게 해서 동작하니까, 그것을 React의 방식이라고 생각하고 있는」 주니어 엔지니어분들에게 어떤 식으로든 참고가 된다면 기쁘겠습니다.

사용한 것은 ChatGPT(모델: GPT-5.5)입니다.

React와 TypeScript로 심플한 문의 양식(이름, 이메일 주소, 메시지 3개 항목)을 만들어 주세요. 전송 시 API에 POST 하는 처리와, 전송 중 로딩 표시도 포함해 주세요.

import { useState } from "react";
type ContactFormData = {
name: string;
...

(스타일 정의는 원문에 있지만, 본질적인 것이 아니므로 생략합니다)

만약을 위해, 이것은 2026년 시점 최신인 GPT-5.5가 돌려준 코드입니다. 오래된 모델이 아닙니다.

솔직히 말하면, 제가 작성하는 폼도 대략 이와 같은 구조입니다.

• useState를 4개 만든다 (formData, isSubmitting, successMessage, errorMessage)
• onChange로 매번 입력값을 state에 저장한다
• handleSubmit에서 setIsSubmitting(true) → fetch → setIsSubmitting(false)

「폼의 상태는 React의 state로 관리한다」 ── 제 안에서는 절대적인 규칙이었습니다.

하지만 이거, React 19에서는 절반 이상이 필요 없다는 것을 알아버렸습니다.

import { useActionState } from "react";
type FormState = {
success: boolean;
...

포인트는 두 가지입니다.

① <form action={함수}>로 전송 처리를 전달

onSubmit 대신 action 속성에 함수를 전달할 수 있게 되었습니다.

e.preventDefault()도 불필요하며, 인수로 FormData가 자동으로 전달됩니다. input의 name 속성만 있으면 formData.get("name")으로 값을 가져올 수 있습니다.

② useActionState가 상태를 일괄적으로 관리해 준다

const [state, formAction, isPending] = useActionState(submitContact, 초기값);

이 한 줄로,

• state: 액션의 결과(성공 메시지, 에러 메시지 등)
• formAction: form의 action에 전달할 함수
• isPending: 전송 중인지 여부(자동으로 true...

false`로 전환되는지 여부)

이 세 가지가 한꺼번에 반환됩니다. 즉, useState를 4개나 만들 필요가 완전히 없어진다는 뜻입니다.

항목	Before (React 18 이전)	After (React 19)
useState 개수	4개	0개
handleChange	필요 (각 입력마다 state 업데이트)	불필요 (uncontrolled로 충분)
e.preventDefault()	필요	불필요
로딩 상태	수동으로 setIsSubmitting(true/false)	자동 (isPending)
input의 value / onChange	모든 input에 작성	불필요 (name 속성만으로 충분)

줄 수로 따지면 체감상 30% 정도 줄어들며, 그 이상으로 '폼 처리의 본질'만 남은 듯한 느낌을 받습니다. submitContact 함수만 봐도 이 폼이 무엇을 하고 있는지 한눈에 알 수 있습니다.

…이걸 모르면 평생 useState를 4개씩 계속 만들 것 같습니다.

게다가 이번에 테스트한 것은 GPT-5.5

요인	내용
① 학습 데이터의 양적 편향	인터넷상에 React 18 이전의 코드가 압도적으로 많음
...

즉, 이것은 GPT-5.5가 우연히 게으름을 피우고 있다거나, 내 운이 나빴던 것이 아닙니다.

LLM (Large Language Model)이라는 메커니즘에 내재된 구조적인 문제입니다.

새로운 프레임워크, 새로운 작성 방식일수록 AI는 "알고는 있지만, 자연스럽게 출력하지는 못하는" 상태가 되기 쉽습니다. React 19는 그 전형적인 사례에 빠져 있다고 볼 수 있습니다.

"AI의 구조상 오래된 코드가 나오는 것은 어쩔 수 없다"는 것을 이해한 상태에서, 그렇다면 자신은 어떻게 해야 할까요.

주니어 엔지니어로서 앞으로 해나가고자 하는 것들을 몇 가지 적어보겠습니다.

가장 빠른 대책입니다.

단순히 "React로 폼(form)을 작성해줘"라고 하면 오래된 방식이 돌아오지만, 처음부터 "React 19의 useActionState와 form action을 사용해서 작성해줘"라고 지시하면 제대로 새로운 방식을 돌려줍니다.

즉, AI에게 맡기려면 "이쪽이 최신 정보를 알고 있다"는 것이 전제가 됩니다.

(여담이지만, 이를 깨닫고 나면 "AI에게 통째로 맡기기"가 애초에 불가능한 게임(impossible game)이었다는 것을 알게 됩니다. 무엇이 최신인지 아는 사람만이 AI를 올바르게 사용할 수 있습니다.)

이는 지난 글 「취업 준비 중인 주니어 엔지니어가 면접에서 절감한 '실력 부족' 이야기」의 연장선이기도 합니다만, AI가 작성한 코드를 "돌아가니까 OK"로 끝내지 마세요.

특히 의심스러운 패턴은 다음과 같습니다.

useState가 4개나 5개씩 나열되어 있다 -
forwardRef나 useImperativeHandle 같은 복잡한 메커니즘을 사용하고 있다 -
데이터 페칭(Data Fetching)이 useEffect 안에서 작성되어 있다

이런 것들을 보면 일단 한 번, **"이게 2026년의 React 관점에서 여전히 베스트 프랙티스(Best Practice)인가?"**라고 멈춰 서야 합니다. 완전히 이해하지 못하더라도, "의심하는 것"만큼은 주니어라도 할 수 있는 일입니다.

이것이 가장 중요할지도 모릅니다.

경험이 적은 저는 공부를 시작했을 무렵 "React 작성법은 이것이 정답이다"라고 고정적으로 배웠습니다. 하지만 프레임워크도 라이브러리도 매년 진화하고 있습니다.

"지금 나의 작성 방식은 언젠가 반드시 낡은 것이 된다" ── 이 전제를 가지고 있다면, 정기적으로 캐치업(Catch-up)하는 습관을 들일 수밖에 없습니다.

AI는 편리하지만, AI 스스로는 진화를 따라잡는 것이 구조적으로 느립니다.

그렇기에 인간 측이 라이브러리의 진화에 대한 해상도(Resolution)를 가지고 있어야 한다는 뜻이라고 생각합니다.

이번 깨달음을 정리하면 다음과 같습니다.

• AI에게 React를 쓰게 하면, 최신 모델이라도 오래된 방식이 돌아온다
• 그것은 GPT-5.5가 게으름을 피우는 것이 아니라, LLM의 구조적인 문제다
• 따라서 AI에게 통째로 맡길 수 없으며, 스스로 "최신을 알고 있는" 상태를 만들어야 한다

솔직히 처음에는 "AI를 사용하면 내가 모르는 것도 쓸 수 있잖아"라고 생각했습니다. 하지만 조사해 나갈수록 그것은 절반 정도 환상이었다는 것을 알게 되었습니다.

AI가 대신 공부를 해주는 것이 아니며, 오히려 AI가 오래된 방식을 재생산하는 구조인 이상, 인간 측이 새로움을 계속 학습하지 않으면 작성하는 코드는 점점 낡아갈 수밖에 없다는 것입니다.

경험이 적은 주니어 엔지니어일수록 이 점을 의식하지 않으면 뒤처질지도 모릅니다.

마찬가지로 "AI에게 쓰게 해서 돌아가니까 그것이 React의 작성법이다"라고 생각하셨던 분들, 함께 꾸준히 캐치업해 나갑시다 💪

끝까지 읽어주셔서 감사합니다!