<div id="readability-page-1" class="page"><article id="post-10540">
	
		<div>
			
<p>Preact 진영에서 Signal이라는 것을 발표했다. React를 몹시도 좋아하지만, 다른 이유로 Preact도 함께 눈여겨 보고 있는 와중에 새로운 기능이 나와서 살펴보았다. 그리고 꽤 중요한 의미를 지니는 것 같아서 쓰고 있던 다른 글 대신 이 글을 먼저 작성해보았다.</p>







<p>Preact는 여러 많은 React-like 프레임워크의 하나였다. 이름부터가 React를 의식하고 지었으며, API 수준에서 호환이 되도록 만들어졌다. 초기에는 정말로 <code>require('react')</code> 대신 <code>require('preact')</code>를 써도 아무 문제없이 동작될 정도였다. 다만 Preact는 React에 비해 더 작고 가볍다는 점을 강조했다. 이는 아직까지도 유효한 특성인데, 파일 크기에 있어 어느 정도 차이가 발생하는가에 대해서는 지난 글 "<a data-type="post" data-id="10477" href="https://taegon.kim/archives/10477">자바스크립트 프레임워크 비교</a>"를 읽어보면 도움이 될 것이다.</p>



<p>문제는 React가 Hooks를 도입하면서 발생했다. Preact에서는 새로운 아키텍쳐를 도입한 Preact X(현재는 Preact 10.x 버전)가 나오기 전까지 Hooks, Fragment 등 React에 있는 새로운 기능을 제공하지 못했다. Preact X가 Preact 10으로 출시되었지만 예전보다는 조금 더 번거로운 방법으로 React와의 호환성을 유지해야 했다. 예를 들어, 다음과 같은 React 코드가 있다고 하자.</p>



<pre><code>import { Component, useState } from 'react';</code></pre>



<p>Preact에서는 Hooks를 따로 import 해줘야 한다.</p>



<pre><code>import { Component } from 'preact';
import { useState } from 'preact/hooks';</code></pre>



<p>Hooks 이후로도 React에는 여러 기능이 추가되었다.  어떤 기능은 <code>preact/compat</code>이라는 호환 레이어에 구현되었고 또 어떤 기능은 아직도 Preact에서 지원되지 않는다. React의 호환 프레임워크로 알려졌지만 React와 완벽하게 호환이 되지 않는 Preact의 운명은 어쩌면 정해져 있는 것일지도 몰랐다. 그늘에 가려진 자의 숙명이랄까.</p>



<h2>Signals?</h2>



<p>그런데 얼마 전부터 Preact를 만든 Jason Miller가 Preact에 큰 변화가 있을 거라는 식의 연기를 솔솔 피워댔다. 그리고 드디어 한국 시간으로는 오늘 새벽에 공개된 것이 바로 Signals였다.</p>



<figure></figure>



<p>위의 코드를 보면 알겠지만 Signals는 컴포넌트의 상태를 더 쉽게 다룰 수 있도록 해준다. 값을 만들고 나면 <code>useState</code>도 없고 값을 설정하는 함수도 없다. 변수를 다루듯 값을 변경하면 자동으로 반영되고, 이 값을 구독하는 컴포넌트도 자동으로 갱신된다. 개발자 편의성과 속도 최적화에 많이 신경써서 작성된 상태관리 라이브러리라는 게 Preact 팀의 설명이다.</p>



<p><a href="https://preactjs.com/blog/introducing-signals/">Signals의 소개 문서</a>를 읽다보면 여러 라이브러리가 떠올랐는데, 우선 이름에서는 같은 signal이라는 단어를 사용하는 <a href="https://www.solidjs.com/">SolidJS</a>가 떠올랐고 Reactivity하게 상태를 업데이트하는 부분에서는 <a href="https://vuejs.org/guide/scaling-up/state-management.html#what-is-state-management">Vue</a> 또는 <a href="https://mobx.js.org/">MobX</a>가 떠올랐으며, 상태를 구독하는 컴포넌트에만 직접 변화를 주어 성능을 최적화한다는 부분에서는 <a href="https://recoiljs.org/">Recoil</a>이 떠올랐다.</p>



<p>성능이나 개발 편의성 면에서 좋아진 점은 많으니 충분히 살펴볼 가치가 있다고 생각한다. 게다가 <a href="https://www.npmjs.com/package/@preact/signals-react">React용 Signals 라이브러리</a>도 제공하고 있으니 원한다면 React에서 벗어나지 않고도 Signals를 사용할 수 있다. 사용법은 굳이 따로 설명이 필요없을 정도로 단순해서 이 글에서는 다루지 않으려 한다. 공식 사이트에 있는 문서도 <a href="https://preactjs.com/guide/v10/signals">HTML 한 페이지 뿐</a>일 정도로 개념이 어렵지 않고 API 함수는 <code>signal</code>, <code>computed</code>, <code>effect</code>, <code>batch</code>로 4개 밖에 없다. 사용법이 직관적이라서 설명없이 코드만 봐도 충분히 이해가 될 정도이다.</p>



<p>무엇보다 중요한 것은 Preact가 드디어 React와 다른 독자 노선을 걷기 시작했다는 점이다. 앞서 말했듯이 Preact는 언제나 React의 뒤만 좇아왔는데 드디어 독자적인 기능을 내기 시작했다는 것이다. 더이상 뒤따라 가는데서 그치지 않고 고유한 기능을 내세우는 독립적인 프레임워크로서 자리잡기를 원한다는 신호로 보았다.</p>



<h2>마치며</h2>



<p>개인적인 관심으로 Preact를 사용해보면서 느낀 점은 React를 사용하던 사람이라면 꽤 편리하게 접근할 수 있을 거라는 점, 그리고 더 가벼운 웹 사이트를 만드는 데 도움이 될 거라는 점이었다. 하지만 단점도 많다. 앞서 말했듯이 이제는 React와 완벽하게 호환이 되지 않아서 Preact를 지원하지 않는 React 써드파티가 너무 많다. 게다가 나처럼 React 호환 패키지를 사용하는 것조차 꺼리는 사람이라면 써드파티 라이브러리를 찾기가 훨씬 더 어려워진다.</p>



<p>그럼에도 불구하고 Preact는 React와는 별개로 사용을 고려해볼만한 나름의 매력이 있는 프레임워크라 생각한다. 이제 Signals가 더해져 독자 노선을 걷기로 한 듯 보이는 Preact. 그 앞에는 뭐가 더 기다리고 있을까.</p>



<p>덧 // 커버 이미지는 <a href="https://openai.com/dall-e-2/">DALL-E 2</a>를 사용해 생성한 결과물을 바탕으로 했습니다.</p>
		</div>
	</article></div>

코드쓰는사람

Preact 진영에서 Signal이라는 것을 발표했다. React를 몹시도 좋아하지만, 다른 이유로 Preact도 함께 눈여겨 보고 있는 와중에 새로운 기능이 나와서 살펴보았다. 그리고 꽤 중요한 의미를 지니는 것 같아서 쓰고 있던 다른 글 대신 이 글을 먼저 작성해보았다. Preact? Preact는 여러 많은 React-like 프레임워크의 하나였다. 이름부터가 React를 의식하고 지었으며, API 수준에서 호환이 되도록 만들어졌다. 초기에는 정말로 require('react') […]

Signals: React의 그늘에서 벗어나는 Preact?

댓글