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

상태 업데이트 중...

반응하다

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>
  )

}

뷰

<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>

날씬한

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

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

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