react18 썸네일형 리스트형 React에서 서버 컴포넌트(Server Components) 실험하기 React 18부터 실험적으로 도입된 서버 컴포넌트는 클라이언트가 아닌 서버에서 렌더링되어 성능 최적화에 도움을 줍니다. 이번 글에서는 서버 컴포넌트의 개념과 간단한 사용법을 실무 중심으로 살펴보겠습니다.1. 서버 컴포넌트란?서버 컴포넌트(Server Components)는 React 컴포넌트 중 서버에서만 렌더링되고, 클라이언트로는 HTML과 데이터만 전송되는 컴포넌트입니다. 클라이언트의 자바스크립트 번들 크기를 줄이고 초기 로딩 속도를 향상시킵니다.2. 실험 환경 설정서버 컴포넌트는 아직 React 공식 릴리즈에 완전 통합되진 않았지만, Next.js 13 이상과 같이 일부 프레임워크에서 지원합니다. 간단한 실험을 위해 Next.js 13 앱 디렉터리를 설정하세요.3. 서버 컴포넌트 작성하기서버 컴포.. 더보기 React 18의 Concurrent Features 활용 가이드 React 18의 Concurrent Features는 UI 응답성을 지키면서 무거운 작업을 부드럽게 처리하도록 돕습니다. 핵심은 작업의 우선순위를 나눠 급한 업데이트(타이핑, 클릭)와 무거운 업데이트(필터링, 렌더 트리 큰 변경)를 동시에 조율해 끊김 없는 사용자 경험을 제공하는 것입니다.1. Concurrent Rendering의 목표Concurrent Rendering은 멀티스레드가 아닙니다. React가 렌더링 작업을 쪼개고, 급한 작업을 먼저 처리하며, 불필요해진 작업을 중단할 수 있게 합니다. 따라서 입력 지연, 스크롤 끊김, 대량 리스트 필터링 시 프리즈 같은 문제를 줄일 수 있습니다.2. Automatic Batching: 비동기에서도 렌더 한 번React 18은 이벤트 핸들러뿐 아니라 s.. 더보기 이전 1 다음