릴리스 첫날의 소란이 채 가라앉지 않은 다음 날 아침. 수많은 토론과 추상적인 논쟁 속에서, 마침내 개발자 커뮤니티의 분위기를 바꾸는 결정적인 순간이 찾아왔다. 그것은 한 개인 개발자의 블로그 게시물에서 시작되었다.
게시물의 제목은 평범했다. “내가 내 사이드 프로젝트의 폼 코드를 React 19로 리팩토링한 방법.”
글을 쓴 개발자는 자신이 취미로 만들고 있던 작은 북마크 관리 서비스의 소스 코드를 공개했다. 그는 먼저 React 18 방식으로 작성된 기존의 ‘북마크 추가’ 폼 컴포넌트 코드를 보여주었다. 약 50줄에 달하는 코드였다. useState로 URL과 태그 입력을 관리하고, isSubmitting과 error 상태를 따로 두었으며, handleSubmit 함수 안에는 e.preventDefault()와 fetch 호출, 그리고 복잡한 에러 처리 로직이 가득했다.
“솔직히, 저는 이 코드를 작성하면서도 제가 뭘 하고 있는지 완전히 이해하지 못했습니다.” 그는 솔직하게 고백했다. “그저 수많은 튜토리얼에서 본 패턴을 따라 했을 뿐입니다.”
그리고 다음 섹션에서, 그는 이 50줄짜리 코드를 React 19의 서버 액션과 useFormState, useFormStatus를 사용해 리팩토링한 결과를 보여주었다.
새로운 코드는 믿을 수 없을 정도로 짧았다.
// AddBookmarkForm.js
'use client';
import { useFormState } from 'react-dom';
import { addBookmarkAction } from './actions';
import { SubmitButton } from './SubmitButton';
export function AddBookmarkForm() {
const [state, formAction] = useFormState(addBookmarkAction, { message: null });
return (
<form action={formAction}>
<input type="url" name="url" required />
<input type="text" name="tags" />
<SubmitButton />
{state?.message && <p>{state.message}</p>}
</form>
);
}
클라이언트 컴포넌트의 코드는 10줄 남짓으로 줄어 있었다. 서버 액션 코드를 합쳐도, 전체 코드의 양은 이전의 절반도 되지 않았다.
“코드가 1/5로 줄었습니다.”
개발자는 자신의 경험을 이렇게 요약했다. “하지만 더 중요한 것은 코드의 양이 아닙니다. 저는 이제 제 코드가 무엇을 하는지 명확하게 이해할 수 있게 되었습니다. 폼은 그저 데이터를 모아 액션을 호출할 뿐이고, 액션은 서버에서 데이터를 처리하고, 상태는 그 결과를 보여줍니다. 모든 것이 자신의 역할에만 충실합니다.”
이 게시물은 해커뉴스와 트위터를 통해 순식간에 퍼져나갔다.
이것은 React Core Team이 만든 화려한 데모나 공식 문서가 아니었다. 평범한 개발자가 자신의 실제 코드에서 겪은, 날것 그대로의 경험이었다. 바로 그 점이 수많은 개발자들의 마음을 움직였다.
“와, 이건 진짜다.”
“어제까지만 해도 너무 복잡하다고 생각했는데, 이 ‘Before & After’를 보니 생각이 바뀌었어. 이건 복잡한 게 아니라, 오히려 단순해지는 거였구나.”
“저 50줄짜리 코드가 바로 내 코드인데? 당장 리팩토링 시작한다.”
이것이 바로 커뮤니티의 첫 번째 ‘아하!(Aha!)’ 모먼트였다.
사람들은 비로소 React 19가 단순히 새로운 기술의 집합이 아니라, 자신들이 매일같이 마주하던 실제 문제, 즉 ‘복잡성’을 해결하기 위한 구체적인 해답이라는 사실을 피부로 느끼기 시작했다. 추상적인 논쟁의 안개가 걷히고, React 19의 진정한 가치가 선명하게 드러나는 순간이었다.
이 작은 블로그 게시물 하나가, 수천 마디의 공식 설명보다 더 강력한 설득력을 발휘하며, 새로운 패러다임을 향한 커뮤니티의 굳게 닫혔던 마음의 문을 활짝 열어젖히고 있었다.
