React의 시그널 소개 🚥

우리는 React에서 모든 상태를 듣거나 사용했습니다. 전체 페이지 새로 고침을 트리거하지 않고 그에 따라 UI를 업데이트하기 위해 값과 변경 사항을 관찰하는 방법입니다. 이것은 매우 유용하지만 비용이 듭니다. 상태 변경은 구성 요소의 다시 렌더링을 트리거하여 성능에 영향을 줄 수 있습니다.

프리액트

Preact은 React와 동일한 API를 사용하는 3kb 대체 라이브러리입니다. 그러나 더 작기 때문에 브라우저에 더 적은 코드를 제공합니다.
최근에 그들은 Signals라고 불리는 반응을 설치할 수 있는 새로운 패키지를 발표했습니다.
Docs

문서에 따르면:

What makes Signals unique is that state changes automatically update components and UI in the most efficient way possible. Automatic state binding and dependency tracking allows Signals to provide excellent ergonomics and productivity while eliminating the most common state management footguns.

신호가 하는 일은 속성을 포함하는 객체입니다.value. 신호/객체가 동일하게 유지되지만 해당 값이 변경될 수 있다고 정의하면 해당 값에 대한 참조가 업데이트될 수 있도록 이 변경 사항을 알립니다.

이것을 흥미롭게 만드는 몇 가지 사항은,

신호가 전체 구성 요소의 재렌더링을 트리거하지 않고 대신 해당 위치의 값만 업데이트합니다.

전역적으로 정의하고 다른 구성 요소에서 가져올 수 있으므로 특정 신호의 값이 변경될 때마다 응용 프로그램 전체에서 해당 값으로 UI를 업데이트할 수 있습니다.

반응에 신호를 설치하려면

npm install @preact/signals-react

간단한 사용 사례

import {signal} from '@preact/signals-react'

//create a signal
const count = signal(0)

const App = () =>{
 return(
   <>
     <p>{count.value}</p>
   </>
)}

Preact signal Github

그래서 그것을 시도하고 너희들이 어떻게 생각하는지 알려주십시오.

건배와 행복한 코딩 🍻👩‍💻