Solid 2가 자체 메타 프레임워크를 대체하다

현재 릴리스 후보(Release Candidate) 단계인 Solid 2.0은 비동기 작업을 근본적으로 재작업하여 반응형 그래프 내의 일급 시민으로 통합했습니다. 이를 통해 Solid 1의 createResource 프리미티브가 필요 없어졌으며, createMemo와 같은 계산 함수가 프로미스(promise)를 직접 반환할 수 있게 되었습니다. 이제 프레임워크가 비동기 값을 네이티브로 이해하고 관리하므로, fetchUser나 유사한 데이터 소스를 반응형 흐름에 통합하는 방식이 간소화되었습니다.

createResource를 제거하면 데이터 페칭 로직이 단순화되고 컴포넌트 코드가 깔끔해집니다. Solid 1에서는 개발자가 createResource의 출력을 관리해야 했으며, 리소스 값에 접근할 때마다 null이나 undefined 체크를 산발적으로 수행해야 했습니다. Solid 2의 직접적인 프로미스 반환 방식은 반응형 그래프가 데이터 준비 상태를 처리하게 하므로, 이러한 체크가 필요 없으며 컴포넌트는 오직 정의된 일반 값만 다루면 됩니다.

바운더리(Boundary) 프리미티브 또한 새로운 비동기 모델에 맞춰 재설계되어 개발자와 사용자 경험을 모두 개선했습니다. Suspense는 초기 데이터 부재 시 대체 UI를 렌더링하는 Loading 바운더리로 대체되었습니다. ErrorBoundary는 Errored로 변경되었으며, 이는 이름 변경과 함께 내부적인 재작업이 포함되었습니다. 또한 SuspenseList는 Reveal로 변경되었습니다.

이러한 개선된 바운더리 접근 방식은 사용자 경험을 크게 향상시킵니다. 프로미스를 소비할 때 UI를 차단하는 다른 프레임워크와 달리, Solid 2는 프로미스가 생성될 때 그래프로 가져와 값이 읽히는 시점에만 차단합니다. 이를 통해 모든 요청이 완료될 때까지 기다릴 필요 없이 개별 데이터 조각이 준비되는 대로 UI가 즉시 업데이트됩니다. isPending은 UI를 파괴하지 않고도 후속 데이터 페치를 추적합니다.

Solid 2.0은 데이터 변이(mutation)와 이펙트(effect)에 대한 개발자 경험을 크게 개선했습니다. 새로운 변이 흐름은 업데이트를 위한 명확한 생명주기를 정의하는 action 프리미티브를 도입합니다. createOptimistic 및 createOptimisticStore와 결합된 이 시스템은 자동 UI 롤백을 가능하게 합니다. 로컬의 낙관적(optimistic) 변경 사항은 일시적이며, API 호출이 실패할 경우 사라지고 UI를 서버의 권한 있는 상태로 되돌립니다.

직접 변이가 기본 동작이 됨에 따라 스토어 관리가 단순화되었습니다. 이 변경으로 produce 함수가 필요 없어졌으며 createMutable은 더 이상 권장되지 않습니다(deprecated). 이제 개발자는 스토어 초안을 직접 수정할 수 있습니다. storePath 헬퍼는 특정 레거시 사용 사례를 위해 계속 제공됩니다.

createEffect는 대대적인 리팩토링을 거쳐 두 개의 별도 함수로 분리되었습니다. 첫 번째는 의존성을 정의하는 추적 '계산(compute)' 단계이고, 두 번째는 계산된 값을 받아 부수 효과를 실행하는 비추적 '적용(apply)' 단계입니다. 이러한 아키텍처 전환으로 on 헬퍼가 제거되었으며 defer 옵션을 이펙트에서 직접 설정할 수 있게 되었습니다.

이펙트 정리(cleanup) 로직도 발전했습니다. 이제 apply 함수가 정리 로직을 직접 반환하여 리소스 관리가 간소화되었습니다. onMount는 스코프 내의 모든 비동기 작업이 완료된 후에만 실행되는 onSettled로 대체되었으며, 마찬가지로 정리 함수를 반환합니다. createComputed 프리미티브는 제거되었으며, 그 기능은 createMemo나 새로 분리된 이펙트가 담당합니다.

Solid 2.0은 JSX 구문을 크게 단순화하여 프레임워크 고유의 관용구를 줄였습니다. classList prop은 완전히 제거되었으며, 이제 class prop이 문자열, 객체 또는 배열을 직접 허용합니다. 이를 통해 수동으로 문자열을 연결하거나 배열을 조작할 필요 없이 더욱 직관적이고 동적인 조건부 스타일링이 가능해졌습니다.

속성 처리 방식 또한 네이티브 HTML에 더 가깝게 조정되었습니다. 이전에는 명시적 속성 및 불리언 속성 바인딩을 위해 사용되었던 attr: 및 bool: 접두사가 더 이상 필요하지 않습니다. 이러한 변경으로 속성 선언이 표준화되었으며, 일반적인 HTML 속성에 대한 Solid 고유의 구문 계층이 제거되었습니다.

on: 및 onCapture:와 같은 이벤트 핸들링 네임스페이스가 제거되었습니다. 이제 이벤트는 onClick이나 onInput과 같은 표준 camelCase prop을 사용하여 관리되며, 이는 일반적인 웹 개발 패턴을 반영합니다. 또한 use: 지시어는 스택 가능한 ref 콜백으로 대체되어, 커스텀 요소 동작 및 라이프사이클 훅을 위한 더욱 유연하고 조합 가능한 방법을 제공합니다.

리스트 렌더링이 단순화되었습니다. 전용 Index 컴포넌트는 더 이상 제공되지 않으며, 키가 없는 리스트 기능은 <For keyed={false}>로 통합되었습니다. 또한, 횟수 기반 렌더링을 간소화하기 위해 새로운 Repeat 컴포넌트가 도입되어, 지정된 횟수만큼 JSX 블록을 렌더링하는 선언적 방법을 제공합니다. 이러한 변경 사항 및 기타 자세한 내용은 Solid 2.0 RC: The Big <Reveal> - SolidJS 블로그 게시물에서 확인하세요.

Solid 2는 고성능 Oxc 프로젝트를 기반으로 구축된 새로운 Rust 기반 컴파일러를 도입했습니다. 이 재설계된 툴체인은 프레임워크의 빌드 성능을 크게 향상시킵니다. 내부 벤치마크에 따르면 컴파일 속도가 Solid 1의 기존 JavaScript 기반 컴파일러보다 20배에서 350배 이상 빠르며, 이는 더 빠른 개발 주기와 효율적인 프로젝트 빌드로 직결됩니다.

업데이트된 Vite 플러그인은 강력한 'start mode'를 도입하여 개발자에게 즉시 사용 가능한 완전한 애플리케이션 빌드를 제공합니다. 이 모드는 클라이언트 전용 렌더링과 포괄적인 서버 사이드 렌더링(SSR) 기능을 모두 지원합니다. 서버 함수와 같은 핵심 기능을 프레임워크 도구에 직접 통합하여 별도의 패키지 필요성을 없애고 다양한 배포 대상을 위한 프로젝트 설정을 간소화합니다.

이 통합되고 강력한 도구 덕분에 별도의 SolidStart 메타 프레임워크는 불필요해졌습니다. 서버 함수 및 서빙 계층을 포함한 SolidStart의 기존 규칙들은 Solid 코어 또는 컴파일러 플러그인에 직접 흡수되었습니다. 이러한 전략적 움직임은 개발 생태계를 통합하여, SolidStart의 검증된 아키텍처 패턴과 풀스택 기능을 기본 프레임워크 내에 내장함으로써 전반적인 개발자 경험을 단순화합니다.

Solid 2.0의 가장 큰 변화는 무엇인가요?

핵심 혁신은 비동기 작업을 반응형 그래프의 일급 기능으로 만든 것입니다. 이를 통해 계산 함수가 프로미스(promise)를 직접 반환할 수 있게 되어, createResource와 같은 특별한 프리미티브가 필요하지 않게 되었습니다.

SolidStart는 중단되나요?

네, SolidStart는 별도의 메타 프레임워크로서 은퇴합니다. 서버 사이드 렌더링 및 서버 함수와 같은 핵심 기능은 새로운 'start mode'를 통해 코어 Solid 2.0 Vite 플러그인에 직접 통합되었습니다.

Solid 2는 createResource 없이 어떻게 데이터를 가져오나요?

이제 createMemo와 같은 계산 함수가 프로미스를 직접 반환할 수 있습니다. 반응형 시스템이 비동기 상태를 자동으로 이해하고 처리하므로 데이터 가져오기 로직과 컴포넌트 코드가 단순화됩니다.

Solid 2는 빌드 속도가 더 빠른가요?

네, 훨씬 빠릅니다. Solid 2는 Rust로 작성된 새로운 컴파일러 툴체인을 도입했으며, 벤치마크 결과 20배 이상 빠르고 일부 테스트에서는 최대 355배의 속도 향상을 보여줍니다.

Solid 2에서는 Suspense를 무엇이 대체하나요?

Suspense 경계는 Loading으로 대체되었습니다. Loading은 초기 데이터 페치에 대해서만 폴백(fallback)을 렌더링하며, 이후의 페치는 기존 UI를 언마운트하지 않고 isPending을 통해 추적할 수 있습니다.