[Solid] Syntax | 03. Memo

Memo는 effect와 같이 signal의 값에 따라 반응하지만, 읽기 전용인 signal입니다.

 

Memo는 signal값이 변경되면서 함께 업데이트되지만,

 

다음 업데이트 전 까지는 여러번 호출되어도 한 번만 실행됩니다.

 

이를 통해 중복 계산을 줄이는 캐시로서 사용할 수 있습니다.

 

Memo는 createMemo( ) 함수를 통해 사용할 수 있습니다.

// createMemo를 사용하기 위해 먼저 불러와야 합니다.
import { createMemo } from 'solid-js';

// signal이 바뀔 때마다 prop으로 받은 함수를 실행한 뒤 반환값을 저장합니다.
const f = createMemo(function);

 

아래 예시는 피보나치 수열의 n번째 수를 10×5 배열로 출력하는 코드입니다.

 

Memo인 fib()를 50번 호출하지만, 실제 계산은 단 한 번만 실행됩니다.

 

물론 count값이 바뀌면 함수 또한 변경된 count 값에 맞게 계산됩니다.

import { render } from 'solid-js/web';
import { createSignal, createMemo } from 'solid-js';

function fibonacci(num) {
  if (num <= 1) return 1;

  return fibonacci(num - 1) + fibonacci(num - 2);
}

function App() {
  const [count, setCount] = createSignal(10);
  const fib = createMemo(() => {
    console.log('Calculating Fibonacci');
    return fibonacci(count());
  });

  // fib()는 50번 호출되지만, 단 한 번만 계산됩니다.
  return (
    <>
      <button onClick={() => setCount(count() + 1)}>Count: {count()}</button>
      <div>1. {fib()} {fib()} {fib()} {fib()} {fib()}</div>
      <div>2. {fib()} {fib()} {fib()} {fib()} {fib()}</div>
      <div>3. {fib()} {fib()} {fib()} {fib()} {fib()}</div>
      <div>4. {fib()} {fib()} {fib()} {fib()} {fib()}</div>
      <div>5. {fib()} {fib()} {fib()} {fib()} {fib()}</div>
      <div>6. {fib()} {fib()} {fib()} {fib()} {fib()}</div>
      <div>7. {fib()} {fib()} {fib()} {fib()} {fib()}</div>
      <div>8. {fib()} {fib()} {fib()} {fib()} {fib()}</div>
      <div>9. {fib()} {fib()} {fib()} {fib()} {fib()}</div>
      <div>10. {fib()} {fib()} {fib()} {fib()} {fib()}</div>
    </>
  );
}

render(() => <App />, document.getElementById('app'))