서버 컴포넌트 vs 클라이언트 컴포넌트: 제대로 이해되는 사고 모델

useState를 Next.js App Router 파일에 붙여넣었다가 에러에 직면해 본 적이 있다면, Server/Client Component 경계를 혹독하게 경험했을 겁니다. 단순히 "깨지면 'use client' 추가"라고 외우는 대신, 이해가 쏙쏙 들어오도록 멘탈 모델을 만들어 봅시다. 두 대의 컴퓨터, 하나의 앱 잠시 React는 잊어 봅시다. 여러분이 만든 모든 웹 앱은 두 대의 별개의 기계가 매우 다른 작업을 수행합니다. 데이터 센터 어딘가에 위치하여 코드와 로직을 처리하는 서버가 있습니다.