[번역] 마법의 비밀 공개: 다양한 프레임워크에서 반응성 탐구

원문: https://www.builder.io/blog/reactivity-across-frameworks

반응성(Reactivity)

거대한 반응성(Coarse-grained) vs 세분화된 반응성(fine-grained)

• 거대한 반응성(Coarse-grained): 프레임워크는 업데이트가 필요한 DOM 노드를 결정하기 위해 많은 애플리케이션 또는 프레임워크 코드를 실행해야 합니다.

• 세분화된 반응성(Fine-grained): 프레임워크는 코드를 실행할 필요가 없으며 업데이트해야 하는 DOM 노드를 정확히 알고 있습니다.

나의 의견

예제 살펴보기

import { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>+1</button></div>);
};

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <><Display value={count} /><Incrementor setCount={setCount} /></>);
}

function Display({ value }) {
  return <main>{value}</main>;
}

function Incrementor({ setCount }) {
  return <button onClick={() => setCount((v) => v + 1)}>+1</button>;
}

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <><Wrapper value={count} /><Incrementor setCount={setCount} /></>);
}

function Wrapper({ value }) {
  return <Display value={value} />;
}

function Display({ value }) {
  return <main>{value}</main>;
}

function Incrementor({ setCount }) {
  return <button onClick={() => setCount((v) => v + 1)}>+1</button>;
}

리액트 및 앵귤러

NOTE: +1을 클릭하면 모든 컴포넌트가 리렌더링됩니다. 하이드레이션(hydration)을 위한 렌더링 1회 + count의 증가를 위한 렌더링 1회 = 렌더링 2회

NOTE: 위의 링크에서 애플리케이션과 상호작용할 때마다 각 컴포넌트가 리렌더링(count가 증가되어 렌더링)되는 것을 확인할 수 있습니다.

즉, 렌더링 트리에 있는 모든 컴포넌트가 각 상호 작용마다 다시 실행됩니다. 결론은 애플리케이션과 상호 작용하기 전에 모든 컴포넌트를 다운로드해야 한다는 것입니다. 마지막으로 프레임워크의 하이드레이션으로 인해 초기 렌더링 횟수가 증가하는 것을 확인할 수 있습니다.(이는 시작 시 모든 코드가 실행됨을 의미합니다)

NOTE: 이 데모는 SSR/SSG가 아니지만, SSR/SSG를 사용하더라도 동작은 동일합니다.

스벨트

1. 새 창에서 열기를 클릭하여 디버깅하기 쉽도록 스벨트 애플리케이션을 독립적으로 실행할 수 있는 탭으로 표시합니다.

2. 개발자 도구를 엽니다.

3. 생성된 코드로 이동할 수 있도록 소스 맵을 비활성화합니다.

4. p: 함수를 검색하여 스벨트가 변경 감지를 수행하는 모든 위치를 찾습니다.

5. 파일 이름을 기준으로 Render: Display와 같이 각각에 로그 포인트를 추가합니다.

Render Counter
Render Wrapper
Render Display

store와 함께 사용한 스벨트

NOTE: 이 예제에서는 SSR/SSG를 사용하지 않지만, SSR/SSG를 사용하더라도 결과는 동일합니다.

NOTE: 이 예제에서 볼 수 있듯이 스벨트에는 구문과 런타임 동작이 다른 두 개의 개별 반응성 프리미티브가 있다는 점이 흥미롭습니다. 이는 .svelte 파일에서 .js 파일로 코드를 이동하려면 반응성 리팩터링이 필요할 수 있으며, 따라서 단순한 복사-붙여넣기보다 더 많은 작업이 필요할 수 있다는 의미입니다.

뷰(Vue)

NOTE: 이 예시에서는 SSR/SSG를 사용하지 않았지만, SSR/SSG를 사용하더라도 결과는 동일합니다.

inject를 활용한 뷰(Vue)

퀵(Qwik)

솔리드(Solid)

값(Values) vs 옵저버블(Observables) vs 시그널(Signals)

• Values: 어떤 형태의 더티 체킹이 필요합니다. 현재 값과 이전 값을 비교합니다. 앵귤러는 표현식을 비교하고, 리액트는 vDOM을 비교하며, 스벨트는 컴파일러가 수행한 더티 마킹이 있는 표현식을 비교합니다.

• Observables: 앵귤러에서는 RxJS로, 스벨트에서는 store와 함께 사용됩니다.

• Signals (Ref): 뷰, 퀵 및 솔리드에서 사용됩니다. 그러나 뷰에서는 컴포넌트에 연결되는 반면, 퀵에서는 일반적으로 DOM에 연결되고 솔리드에서는 항상 DOM에 연결되며 DOM이 더 세분화된 반응성으로 선호됩니다.

컴포넌트 계층 구조

하이드레이션(Hydration)

트레이드 오프