Vue 3 입문

vue3 공부 시작

공부 내용 기록

//리액트 코드 예시
import React, { useState, useEffect } from 'react';

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component is mounted!');
  }, []);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

export default ExampleComponent;

//뷰3 코드 예시
<script setup>
import { ref, onMounted } from 'vue';

const count = ref(0);

onMounted(() => {
  console.log('Component is mounted!');
});

const increment = () => {
  count.value++;
};
</script>

<template>
  <button @click="increment">Increment</button>
  <p>Count: {{ count }}</p>
</template>

차이점

1. import 위치

react import 최상단
vue import <script setup></script> 내부

2. 함수, 변수 위치

react return 전에 선언
vue <script setup></script> 내부 선언

3. 변화하는 변수 사용방법

react useState DOM접근하지 않음
vue ref
ref=초기값 설정가능 DOM접근해서 변경

4. 태그 작성 위치

react return 값에 작성
vue <templete></templete>내부에 작성

5. react의 경우 import -> function -> return -> export 순서를 지켜야하나 vue에서는 import와 return 부분 순서가 상관이 없다.

6. style

<style></style>태그 내부에 css작성

기업협업으로 온 곳에서는 style대신에 tailwind사용 -> style태그 안에 작성하는 것이 아니라 templete내부 태그 안에 직접 작성