# React와 Solid의 차이점 톺아보기

> Clean Markdown view of GeekNews topic #9762. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=9762](https://news.hada.io/topic?id=9762)
- GeekNews Markdown: [https://news.hada.io/topic/9762.md](https://news.hada.io/topic/9762.md)
- Type: news
- Author: [composite](https://news.hada.io/@composite)
- Published: 2023-07-13T09:20:17+09:00
- Updated: 2023-07-13T09:20:17+09:00
- Original source: [dev.to](https://dev.to/composite/reactwa-solidyi-caijeom-topabogi-4e23)
- Points: 14
- Comments: 1

## Topic Body

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` 등)을 통해 분해하여 여전히 객체처럼 사용해야 함.

## Comments



### Comment 17379

- Author: firea32
- Created: 2023-07-17T11:44:11+09:00
- Points: 1

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