Solid.js 찍먹 후기...?

요즘 Solid.js가 꽤 빠르게 존재감을 키우고 있다.

React와 문법이 비슷해서 진입장벽이 낮고, 성능은 “현시점 최상급”이라는 평가를 자주 본다.

다만 프론트 기술을 선택할 때 늘 걸리는 질문이 있다.

“성능이 좋다”는 이유만으로, 이미 안정적으로 돌아가는 React 생태계에서 넘어갈 만한가?

여기서 변수는 늘 똑같다.

React는 커뮤니티와 레퍼런스, 그리고 압도적인 오픈소스 생태계를 가진다. Solid.js가 성능에서 강점을 가진다 해도, 성능이 곧바로 제품 가치로 연결되는 문제인지는 별개의 이야기다.

나는 왜 Solid.js를 찍먹했나

나는 React로 프론트를 제대로 시작했다. (엄밀히는 Blazor를 먼저 만지긴 했지만, “프론트 개발을 계속하게 만든 계기”는 React였다.)

3년 정도 React/Next.js를 쓰면서, 성능이 아쉬워서 다른 걸 고민해본 적은 많지 않았다.

솔직히 말하면, 내가 다뤘던 제품들은 “렌더링 성능이 치명적인” 종류가 아니었다.

그래서 리렌더 비용이 커 보이는 곳에 useMemo, useCallback을 습관처럼 달아두긴 했지만… 대부분은 지워도 차이가 없었다.

(이게 React가 느리다는 뜻이 아니라, 대부분의 앱은 다른 병목이 더 크다는 뜻에 가깝다.)

그런데 Solid.js는 “React 문법과 비슷하다”는 이야기가 많아서, 한번 직접 체감해보고 싶었다.

토이 프로젝트로 블로그를 갈아엎은 이유

마땅한 토이 아이디어가 떠오르지 않던 시점에, 예전에 급하게 만들어 둔 블로그가 떠올랐다.

React 입문 시절에 만들었던 거라 구조도 엉성했고, “언젠가 고쳐야지”가 계속 쌓여 있던 상태였다.

그래서 결론은 단순했다.

• 새로 뭔가 만들기보다
• 이미 있는 블로그를 Solid.js로 갈아엎어보자

주말마다 조금씩 손대다 보니 대략 5월 초부터 시작해서 7월 초쯤 “굴러가는 수준”까지는 도달했다.

이 글은 그 과정에서 느낀, 아주 현실적인 후기다.

성숙한 커뮤니티, 나에겐 양날의 검

Solid.js는 “새로운 실험용 라이브러리”라기엔 꽤 성숙해 보였다.

React에서 쓰던 것들이 Solid 버전으로 포팅되어 있는 경우가 많아서, 초반에 막히는 지점이 적었다.

예를 들면 이런 것들:

• TanStack Query (Solid용)
• ApexCharts, Heroicons, Toast, Motion 등 Solid 포팅들

이건 분명 장점이다.

그런데 개인적으로는 단점도 있었다.

이번 목적은 “새로운 사고방식/개념을 배우는 것”에 가까웠는데,

막상 개발을 시작하면 기존 React에서 쓰던 조합을 그대로 가져오게 되면서

결국 또 Comfort zone에 머무르는 느낌이 들었다.

사고방식은 다르다

Solid.js에서 제일 중요한 건 “React처럼 보인다”는 착시를 빨리 버리는 거였다.

React가 Hooks 중심의 사고라면, Solid는 reactivity(반응성) 중심이다.

그래서 네이밍도 보통 use- 대신 create-가 많다.

• useState → createSignal
• useMemo → createMemo

겉으로 보기엔 비슷하지만, “비슷해 보이니까 React처럼 쓰면 되겠지”라는 기대는 금방 깨진다.

Reactivity가 깨지는 순간이 있다

가장 당황했던 건 이거였다.

• 컴포넌트 안에서 props를 구조분해하면
• 반응성이 깨져서 이후 변경이 자식에게 반영되지 않는 상황이 생긴다

React에서는 너무 자연스러운 스타일인데, Solid에서는 조심해야 한다.

처음엔 “이게 버그인가?” 싶었는데, 원리를 보면 납득은 된다. (props가 Proxy 기반으로 동작하고, 구조분해는 그 연결을 끊어버리는 식)

문제는 납득과 별개로, 개발 경험은 이렇게 느껴졌다는 거다.

• 초반: “오 문법 비슷한데?”
• 중반: “왜 이게 안 바뀌지?”
• 후반: 문서/디버깅에 시간을 꽤 씀

즉, 제대로 쓰려면 결국 바닥부터 개념을 다시 잡아야 한다. Solid.js는 React의 “대체품”이라고 보기엔 극명하게 다르다.

매력적인 성능, 체감이 없다

이번 프로젝트(블로그)에서는 Solid.js의 성능이 크게 체감되진 않았다.

당연한 얘기다. 블로그 정도는 성능이 병목이 되는 경우가 드물고,

지금은 배포 환경 자체가 무료 플랜이라 더 느린 쪽이 원인이다. (하하)

그래도 얻은 건 있다.

• “React와 비슷해 보이는 것”과 “React처럼 개발할 수 있는 것”은 다르다
• 기술 선택 과정에서 성능도 중요한 요소가 되긴하지만, 생태계, 학습 비용, DX 등도 꼭 같이 고려해야만 한다
• Solid.js는 분명 매력적이지만, 도입 이유가 ‘성능’ 하나뿐이면 설득이 약해질 수 있다