공식 릴리스가 가까워지면서, React Core Team은 자신들이 만든 새로운 패러다임을 개발자들이 어떻게 받아들여야 할지에 대한 근본적인 고민에 다시 집중했다. 수많은 기능들이 있었지만, 그 모든 것을 관통하는 핵심적인 사고방식, 즉 ‘멘탈 모델’을 명확하게 정립하는 것이 중요했다.
그 첫 번째 핵심은 바로 ‘위치(Location)’였다.
세바스찬 마크바게는 회의실 화이트보드의 한가운데에 수직선을 그었다. 그리고 왼쪽에는 ‘서버(Server)’, 오른쪽에는 ‘클라이언트(Client)’라고 적었다.
“React 19 이전의 세계에서, 우리의 모든 컴포넌트는 오직 한 곳, 바로 ‘클라이언트’에만 존재했습니다.”
그는 ‘클라이언트’ 영역에 수많은 점을 찍었다.
“서버는 그저 HTML과 JSON 데이터를 배달해주는 역할에 그쳤죠. 모든 지능과 로직은 클라이언트에 집중되어 있었습니다. 이것이 우리가 알던 React의 세계였습니다.”
하지만 React 19는 이 지도를 완전히 새로 그렸다.
“이제, 모든 React 컴포넌트는 이 지도 위의 어딘가에 자신의 ‘위치’를 가집니다.”
그는 수직선 양쪽에 점들을 골고루 찍었다.
“그리고 컴포넌트의 능력과 역할은 전적으로 그 컴포넌트가 어디에 위치하느냐에 따라 결정됩니다. 이것이 React 19를 이해하는 가장 첫 번째 관문입니다.”
그는 서버 영역에 있는 한 점을 가리켰다.
“서버 컴포넌트. 이 컴포넌트는 서버 땅에 발을 딛고 있습니다. 따라서 서버의 모든 자원에 직접 접근할 수 있죠. 데이터베이스, 파일 시스템, 내부 마이크로서비스, 무거운 라이브러리… 무엇이든 가능합니다. 하지만 클라이언트의 세계와는 단절되어 있기 때문에, 사용자의 클릭에 반응하거나(onClick), 상태를 기억하는(useState) 능력은 없습니다.”
그 다음, 그는 클라이언트 영역에 있는 점을 가리켰다.
“클라이언트 컴포넌트. 이 컴포넌트는 사용자의 브라우저라는 바다 위를 떠다니는 배와 같습니다. 따라서 사용자와 직접 상호작용할 수 있습니다. 클릭을 감지하고, 상태를 바꾸며, 동적인 UI를 만들어낼 수 있죠. 하지만 서버의 자원에는 직접 접근할 수 없습니다. 데이터를 원한다면 서버에 요청을 보내야만 합니다.”
이 ‘위치’라는 멘탈 모델은 개발자들의 오랜 고민을 단순화시켰다.
‘이 로직은 어디에 두어야 할까?’라는 질문은 이제, ‘이 로직은 어떤 능력이 필요한가?’라는 질문으로 바뀌었다.
- 데이터베이스에 접근해야 하는가? → 서버 컴포넌트
- 사용자의 클릭에 반응해야 하는가? → 클라이언트 컴포넌트 (
'use client') - 무거운 라이브러리를 사용하지만 UI 상호작용은 없는가? → 서버 컴포넌트
- 브라우저의 API(예:
localStorage)를 사용해야 하는가? → 클라이언트 컴포넌트
React 19는 개발자에게 선택을 강요하는 것이 아니었다. 각 작업에 가장 적합한 ‘장소’를 제공하고, 그 장소의 규칙을 명확히 함으로써, 오히려 개발의 복잡성을 줄여주었다.
‘컴포넌트는 어디에 있는가?’
이 질문에 답하는 순간, 개발자는 자신이 작성하는 코드의 역할과 한계를 명확히 이해하게 된다. 이것이 바로 React 19가 제시하는 새로운 세계의 첫 번째 법칙, 위치의 중요성이었다.
