React 19의 멘탈 모델 (3) - 데이터의 흐름

공간(위치)과 시간(흐름)에 이어, React 19 멘탈 모델의 마지막 세 번째 축은 바로 ‘데이터(Data)’였다. 특히, 사용자의 입력으로 인해 발생하는 데이터의 ‘쓰기(write)’ 흐름을 어떻게 다룰 것인가에 대한 새로운 관점이었다.

앤드류 클라크는 화이트보드에 다시 한번 ‘서버’와 ‘클라이언트’라는 두 개의 영역을 그렸다. 그리고 클라이언트 영역에서 시작되어 서버 영역으로 향하는 화살표를 그렸다.

“전통적인 방식에서, 이 화살표의 이름은 ‘API 요청(Request)’이었습니다.”

그는 화살표 위에 fetch('/api/...') 라고 적었다.

“클라이언트는 서버가 이해할 수 있는 언어, 즉 HTTP와 JSON의 형태로 데이터를 정성껏 포장해서 보냈습니다. 서버는 그 포장을 풀어서 내용을 확인하고, 자신의 일을 처리했죠. 이 과정에는 항상 번거로운 번역 작업이 필요했습니다.”

이 모델에서 데이터의 흐름은 단절되어 있었다. 클라이언트가 보낸 요청과 서버가 수행하는 작업은 서로 다른 세상의 일처럼 느껴졌다.

“하지만 서버 액션은 이 데이터의 흐름을 완전히 새로운 방식으로 정의합니다.”

앤드류는 기존의 화살표를 지우고, 새로운 화살표를 그렸다. 그리고 그 위에 action() 이라고 적었다.

“이제 이 화살표의 이름은 ‘액션(Action)’입니다. 더 이상 저수준의 HTTP 요청이 아니라, 하나의 의미를 가진 ‘행위’ 그 자체를 의미합니다.”

이 새로운 모델에서 데이터의 흐름은 훨씬 더 직관적이고 통합적으로 변했다.

1. 시작점 (클라이언트): 흐름은 여전히 클라이언트의 <form>에서 시작된다. 하지만 개발자는 더 이상 FormData를 수동으로 만들거나 fetch를 호출하지 않는다. 그저 action 속성에 서버에서 정의한 함수를 연결할 뿐이다.

2. 흐름의 자동화 (React): React가 중간 다리 역할을 한다. form이 제출되면, React는 자동으로 FormData를 생성하고, 약속된 서버 액션을 호출하는 RPC 요청을 만들어 서버로 보낸다. 개발자에게 이 과정은 보이지 않는다. 마치 클라이언트에서 서버 함수를 직접 호출하는 것처럼 느껴질 뿐이다.

3. 종착점 (서버): 서버에 도달한 요청은 곧바로 연결된 서버 액션 함수를 실행시킨다. 이 함수는 데이터베이스를 업데이트하는 등의 실제 작업을 수행한다.

“가장 중요한 것은, 이 흐름이 단방향으로 끝나지 않는다는 것입니다.”

앤드류는 서버에서 다시 클라이언트로 향하는 점선 화살표를 추가했다.

“서버 액션은 자신의 실행 결과를 ‘상태(state)’의 형태로 다시 클라이언트에 돌려보낼 수 있습니다. useFormState 훅이 바로 이 역방향 흐름을 처리하는 통로입니다.”

• 서버가 “유효성 검사 실패!”라는 메시지를 담은 상태를 반환한다.
• 클라이언트의 useFormState가 그 상태를 받아, 화면에 에러 메시지를 보여준다.

이것이 바로 React 19가 제시하는 데이터 ‘쓰기’의 새로운 흐름이었다.

클라이언트의 요청이 서버로, 서버의 응답이 다시 클라이언트로 흐르는 이 모든 과정이, action과 state라는 React의 익숙한 개념 안으로 완벽하게 통합되었다. 개발자는 더 이상 네트워크의 경계를 넘나들기 위해 골머리를 앓을 필요가 없었다. 그저 클라이언트에서는 액션을 호출하고, 서버에서는 상태를 반환하면 그만이었다.

이 간결하고 예측 가능한 데이터의 흐름. 이것이 바로 React 19가 복잡한 폼 처리를 정복한 비결이자, 새로운 멘탈 모델의 마지막 퍼즐 조각이었다.