숨겨진 영웅, 에러 메시지

릴리스를 향한 카운트다운이 계속되는 동안, 대부분의 스포트라이트는 서버 컴포넌트나 Actions 같은 화려한 기능들에 쏟아졌다. 하지만 React Core Team 내부에서는, 겉으로 드러나지 않지만 개발자의 일상을 가장 직접적으로 바꿀 또 다른 ‘영웅’에 대한 최종 점검이 이루어지고 있었다. 바로 새롭게 디자인된 ‘에러 메시지’ 시스템이었다.

개발자 경험(DX) 팀의 리더는 마지막 점검 회의에서, 개선된 에러 메시지의 철학을 다시 한번 강조했다.

“좋은 에러 메시지는 세 가지 요소를 갖춰야 합니다. 무엇이(What) 잘못되었는가, 왜(Why) 그것이 문제인가, 그리고 어떻게(How) 해결해야 하는가. 과거의 React는 ‘무엇이’에만 집중했습니다. React 19는 ‘왜’와 ‘어떻게’를 함께 제공합니다.”

그는 몇 가지 실제 사례를 들어 개선된 에러 메시지의 위력을 시연했다.

사례 1: 잘못된 훅 사용

• Before: Error: Rendered fewer hooks than expected. This may be caused by a Hook call returned early. (무슨 말인지 알기 어렵다.)
• After:

  React detected a change in the order of Hooks called by MyComponent.
  
  ▼ Previous render
     1. useState
     2. useEffect
  ▼ This render
     1. useState
  
  This is not allowed because React relies on the order of Hooks to be the same on every render. This is often caused by conditional calls to Hooks.
  
  Do not call Hooks inside conditions, loops, or nested functions.
  

  새로운 메시지는 이전 렌더링과 현재 렌더링의 훅 호출 순서를 직접 비교해서 보여주며, 문제의 원인과 해결책을 명확히 제시했다.

사례 2: 서버 컴포넌트 내 클라이언트 API 사용

• Before: TypeError: useState is not a function (서버 환경이라 useState가 없다는 사실을 유추해야 한다.)
• After:

  You're importing a component that needs 'useState'. It only works in a Client Component but none of its parents are marked with "use client", so they're all Server Components by default.
  
  Learn more: https://react.dev/...(링크)
  
  Maybe one of these should be a Client Component?
  - MyComponent (./app/MyComponent.js)
  

  새로운 메시지는 useState가 클라이언트 전용임을 명확히 알리고, 문제 해결을 위해 'use client'를 추가해야 할 파일 후보까지 친절하게 제안했다.

이러한 개선은 수백 가지의 일반적인 에러 시나리오에 걸쳐 적용되었다. 팀은 단순히 에러 메시지를 바꾸는 것을 넘어, React가 개발자와 대화하는 방식을 근본적으로 바꾸고 있었다.

“우리의 목표는 개발자가 스택 오버플로우를 검색하기 전에, React가 먼저 답을 주는 것입니다.” DX 팀 리더가 말했다.

이것은 보이지 않는 곳에서의 배려였다. 화려한 기능 발표에서는 결코 주목받지 못할 작은 변화였다. 하지만 개발자가 코드 에디터 앞에서 좌절하는 매 순간, 이 친절한 에러 메시지는 길을 잃은 개발자에게 등대가 되어주고, 디버깅에 쏟는 수많은 시간을 절약해주며, 궁극적으로는 React를 배우는 과정 자체를 더 즐겁게 만들어줄 터였다.

숨겨진 영웅, 에러 메시지. 이 작은 거인의 존재야말로 React 19가 기술적 성취뿐만 아니라, 개발자에 대한 깊은 공감과 배려 위에서 만들어진 프레임워크임을 증명하는 가장 확실한 증거였다.