React와 Solid의 차이점 톺아보기

JSX 의 원조인 React 와 JSX에서 파생하여 React와 달리 가상DOM을 사용하지 않는 Solid.js 의 차이점을 알아보았습니다.

React 개발자가 Solid.js 에 접근할 경우를 가정하여 차이점을 보았을 때, 기초적으로 아래와 같은 차이점이 있습니다.

• React의 훅 함수는 컴포넌트 함수 내에서만 사용 하능하나, SolidJS의 상태관리 함수는 마치 독립적인 상태관리 기술처럼 호출에 대한 제약 없음.
• React의 Side-effect 함수인 useEffect 함수는 하나의 함수에 부작용 시에 대한 처리와 해제 시까지 한 번에 제공 가능하며, 영향받을 상태를 수동으로도 지정할 수 있으나, Solid.js 의 Side-effect 함수인 createEffect는 Svelte 처럼 본문에 명시한 상태관리에 영향을 받으며, 영향받을 상태를 수동으로 제공하지 않고, 반환 함수를 제공하지 않지만 하나의 상태관리 주기 환경을 제공하여 onCleanup 을 통한 해제 함수 사용 가능.
• 상태 범위 관리에 대해서는 React와 사용법 상의 차이 없음.
• 동적 컴포넌트나 조건, 반복문에 대해서 React 는 상태 변경 시 본문이 재작성되는 특성에 따라 손쉽게 js 로직을 사용하여 대응 가능하나, Solid 는 본문이 유지되기 때문에 제공하는 내장 컴포넌트를 통해 해결 가능.
• React의 lazy 및 <Suspense> 컴포넌트를 Solid.js 에서도 제공.
• Solid는 React와 달리 비동기 반응성을 고려한 상태관리 유틸리티 함수 제공.
• React의 ref 와 Solid.js 의 ref 사용법은 비슷하나, React에서 주로 참조를 위한 useRef 같은 전용 함수는 Solid.js 에서는 간단히 let 변수로 활용 가능.
• Solid.js 는 Svelte 처럼 바닐라 JS의 생명주기를 관리하는 use 액션 특성 제공.
• React 의 속성(Props)은 구조 분해를 통해 단독으로 사용해도 속성 변경 시 본문이 재작성되기 때문에 문제 없이 사용 가능하나, 이 방법을 Solid.js 에서 사용하면 반응하지 않기 때문에 구조 분해를 통한 단독 속성 활용이 불가하며, 객체 형식 그대로 사용하거나, 객체 분해나 병합을 제공하는 유틸리티 함수(splitProps 등)을 통해 분해하여 여전히 객체처럼 사용해야 함.

[firea32]

가장 큰 차이점은 useState 와 useSignal 의 차이죠. 데이터가 binding 되는게 눈에 보이지 않아서 디버깅하는데 너무 고생한 기억이 있네요