React, Vue 및 Svelte: 상태 업데이트 방법 비교

상태 업데이트 중...

위에서 설명한 것처럼 React에는 setState 메서드가 있습니다. 직접 사용하거나 다른 함수로 래핑하여 속성을 업데이트할 수 있습니다.
Svelte는 단지 컴파일러이기 때문에 JavaScript 변수로 하는 것처럼 직접 업데이트합니다!
Vue는 message.value = 'new value'를 사용하여 새 값에 액세스하는 것을 제외하면 거의 동일한 구문을 사용합니다.

확인해보세요 🚀

반응하다

Link

import { useState } from 'React';

const Component = () => {
  // state
  const [message, setMessage] = useState<string>('Hello');
  const updateMessage = () => setMessage('Hello World');

  return (
    <div>
      { message }
      <button onClick={updateMessage}>Update message<button>
    </div>
  )

}

뷰

Link

<script setup lang="ts">
  import { ref } from 'vue'; 
  // state
  const message:string = ref('hello');

  const updateMessage = () => {
    message.value = 'Hello World';
  }
</script>

<template>
 {{ message }}
 <button @click="updateMessage">Update message</button>
</template>

날씬한

Link

<script lang="ts">
// state
let message:string = 'hello';

const updateMessage = () => {
  message = 'Hello World';
}
<script>

<div>{ message }</div>
<button on:click="updateMessage">Update message</button>