[Solid] Syntax | 01. Signal

Solid에서 Signal은 React에서의 State와 유사한 역할을 합니다.

Solid에서 Signal은 createSignal() 함수를 통해 사용할 수 있습니다.

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

// useState를 호출하면, getter 함수와 setter 함수를 반환합니다.
const [getter, setter] = createSignal(0);

createSignal( )는 초기 상태값을 매개변수로 받으며, 두 가지 요소를 반환합니다.

    - getter : 현재 signal을 반환하는 함수

    - setter : signal 값을 변경하는 함수
(물론, 이 두 반환값의 이름은 임의로 지을 수 있습니다)

 

Solid 또한 signal이 바뀜에 따라 랜더링을 수행합니다.

때문에 React의 state와 같이 array와 같은 참조형 변수를 singal로 할 때 주의해야 합니다.

[자세한 설명]

 

아래 예시는 1초마다 signal 값을 1씩 증가시키는 코드입니다.

function App() {
  const [count, setCount] = createSignal(0);

  setInterval(() => setCount(count() + 1), 1000);

  return <div>Count: {count()}</div>;
}

export default App;