리액트 개발자가 Svelte 하루 써보고 느낀 점 (feat. GraphQL)

이번에 사이드 프로젝트로 Svelte를 이용해서 Todo 앱을 만들었다. 목업이 아닌, 전체적인 개발 프로세스를 확인하기 위해서 GraphQL 백엔드와 인증까지 구현하였다. (참고로 백엔드는 NestJS + Prisma + GraphQL로 간단하게 구성했다.)

Svelte는 평소에 짬짬히 공식문서를 읽긴 했는데 직접 프로젝트를 만든건 처음이다. 여러가지 신선함들이 있어서 재미있었다. 그래서 내용을 정리해보고자 한다.

간결한 구조 but 기괴한 문법

일단 컴포넌트를 만드는데 보일러 플레이트가 없다는 점은 생산성 향상에 상당한 도움을 줄 것 같다. React와 비교한다면..

import { useState } from "react";

export default function Name() {
  const [name] = useState("John");

  return <h1>Hello {name}</h1>;
}

반면 Svelte에서는 아래처럼 보일러플레이트 없이 비지니스 로직과 마크업만 작성하면 된다.

<script>
  let name = "John";
</script>

<h1>Hello {name}</h1>

하지만 Logic blocks은 상당히 난해해서 적응하는데 시간이 많이 소요될 것 같다.

// 조건 분기 구문
{#if $todos.fetching}
  <p>Loading...</p>
{:else if $tasks.error}
  <p>Error: {$tasks.error.message}</p>
{:else}
  <p>Data {......}</p>
{/if}

// each 구문
{#each items as item, i}
  <li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

여는 구문은 #로 시작하고, 중간구문은 : 닫는 구문은 /로 마무리 한다는 건 알겠는데 적응이 안된다.
아래처럼 만들었으면 훨씬 직관적이었을텐데..

{if (condition)}
  ...
{else if (condition)}
  ...
{else}
  ...
{end}

{foreach (item, i) of items}
  ...
{end}

임의로 작성해보았다.
뭐 나보다 훠어어얼씬 잘하는 사람들이 만들었을테니 나름대로의 이유가 있겠지..

Apollo client 미지원

리액트 할 땐 GraphQL 클라이언트로 Apollo Client 를 사용하였다. 익숙하니 Svelte 로도 이것을 이용하려고 했다.

하지만 공식 홈페이지 문서에서 Svelte 전용 Apollo 라이브러리로 svelte-apollo 추천해주는데, 마지막 커밋이 2022년 4월이다. 당장은 크게 문제될 것 같지는 않지만 Maintaining 되지 않은 라이브러리를 적용하기엔 많이 찝찝했다.

수소문 끝에 다른 GraphQL Client 인 urql 라이브러리를 적용하였다. 이 패키지는 Svelte를 공식지원한다. (또한 리액트, Vue도 공식적으로 지원한다)

문서도 꽤나 잘 작성되어 있어서 적용하는데 큰 어려움은 없었다. 기존 Apollo Client와 큰 부분에서는 비슷비슷 했다.

store 짱짱맨

Svelte 의 기능 중에 하나인 store은 정말 편리하다. Apollo Client의 Reactive Variable과 똑같은 기능이다. 리액트에서도 Recoil같은 써드파티 상태관리 라이브러리를 사용하면 비슷하게 구현이 가능하지만, Svelte store은 프레임워크 내장 기능이기 때문에 비교할 수가 없다.

레퍼런스 부족

문제가 발생했을 때 레퍼런스가 상당히 부족하다. 리액트나 NextJS는 문제가 생기면 에러메시지만 구글링 하면 거의 바로 문제 해결이 가능한데, 스벨트는 검색해도 레퍼런스가 많이 부족한게 느껴졌다.

특히 urql 라이브러리 관련된 내용이 많이 부실했다. urql with react 관련된 내용은 많은데 svelte는 거의 없다시피 해서 조금 고생을 많이 했다.

사실 겉핥기 식으로 사용해본 것이라 뭔가 더 떠오르진 않는다. 일단 익숙해지면 리액트보다 생산성 측면에선 훠얼~씬 낫다고 생각이 든다.

솔직히 리액트 하면서 퍼포먼스 측면에서 부족함을 느낀 적이 없어서 뭐 가상DOM이다 리얼DOM이다 이런건 뭔진 알겠는데 체감은 그닥 안된다.

아무튼 SvelteKit도 시간나면 한번 파봐야겠다. 대충 문서 읽어보니 NextJS랑 거의 구조적으로 똑같은 수준이긴하다 (...)