컴포넌트 테스트 - Counter

1
<script setup lang="ts">
2
import { Icon } from '@iconify/vue';
3
import { computed, ref } from 'vue';
4

5
const count = ref(0);
6
const doubleCount = computed(() => count.value * 2);
7

8
function counterChange(arg: 'increment' | 'decrement') {
9
  if (arg === 'increment') {
10
    count.value++;
11
  }
12
  else {
13
    count.value--;
14
  }
15
}
16
</script>
17

18
<template>
19
  <div class="flex items-center justify-between mx-auto w-1/2">
20
    <button class="text-2xl" @click="counterChange('decrement')">
21
      <Icon icon="tabler:minus" />
22
    </button>
23
    <p class="text-2xl font-bold">
24
      {{ count }}
25
    </p>
26
    <button class="text-2xl" @click="counterChange('increment')">
27
      <Icon icon="tabler:plus" />
28
    </button>
29
  </div>
30

31
  <div>
32
    DoubleCount: {{ doubleCount }}
33
  </div>
34
</template>

1
<script lang="ts">
2
  import { Icon } from "@iconify/react";
3

4
  let counter = $state(0);
5
  function counterChange(arg: "increment" | "decrement") {
6
    if (arg === "increment") {
7
      counter++;
8
    } else {
9
      counter--;
10
    }
11
  }
12

13
  const doubleCount = $derived(counter * 2);
14
</script>
15

16
<div class="flex items-center justify-between mx-auto w-1/2">
17
  <button class="text-2xl" onclick={() => counterChange("decrement")}>
18
    -
19
  </button>
20
  <p class="text-2xl font-bold">
21
    {counter}
22
  </p>
23
  <button class="text-2xl" onclick={() => counterChange("increment")}>
24
    +
25
  </button>
26
</div>
27

28
<div>
29
  DoubleCount: {doubleCount}
30
</div>

1
import { Icon } from '@iconify/react';
2
import React, { useMemo, useState } from 'react';
3

4
export default function ReactCounter() {
5
  const [count, setCount] = useState(0);
6
  const dobuleCount = useMemo(() => count * 2, [count]);
7

8
  function counterChange(arg: 'increment' | 'decrement') {
9
    if (arg === 'increment') {
10
      setCount(count + 1);
11
    }
12
    else {
13
      setCount(count - 1);
14
    }
15
  }
16

17
  return (
18
    <>
19
      <div className="flex items-center justify-between mx-auto w-1/2">
20
        <button
21
          type="button"
22
          className="text-2xl"
23
          onClick={() => counterChange('decrement')}
24
        >
25
          <Icon icon="tabler:minus" />
26
        </button>
27
        <p className="text-2xl font-bold">{count}</p>
28
        <button
29
          type="button"
30
          className="text-2xl"
31
          onClick={() => counterChange('increment')}
32
        >
33
          <Icon icon="tabler:plus" />
34
        </button>
35
      </div>
36
      <div>
37
        DoubleCount:
38
        {' '}
39
        {dobuleCount * 2}
40
      </div>
41
    </>
42
  );
43
}