Vue 입장에서 작성한 Vue VS React & Vue 기본 문법

프레임워크 vs 라이브러리

• 특징

  • FrameWork
    • 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있는 것
    • 일정한 형태를 가지고 다양한 형태의 결과물을 만드는 것
  • Library
    • 소프트웨어를 개발할 때 프로그래밍 사용하는 비휘발성 자원의 모임
    • 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것

• 구체적 예시

  • FrameWork

    • 차, 비행기, 배 같은 탈 것 ⇒ 정해진 곳으로만 다녀야 함.
      • 차를타고 하늘을 날거나, 배를 타고 땅으로 갈 수 없다
      • 목적에 맞게 만들어져 있다는 뜻 ⇒ 정해진 규칙대로 작동하기만 하면 됨
        

  • Library

    • 톱, 망치, 삽 같은 연장 ⇒ 어떻게 활용하느냐에 따라 용도가 바뀔 수 있음
      • 어떤 도구를 사용하든 원하는 결과물을 얻을 수 있으면 된다
        

Vue 란

• UI 개발을 위한 자바스크립트 프레임워크.
• HTML, CSS, JavaScript를 기반으로 단순 하거나 복잡한 UI를 효율적으로 개발하는 데 도움을 준다.

특징

• MVVM (Model-View-ViewModel)

  • 프로그래밍 로직과 화면에 해당하는 로직(UI)을 분리해서 개발하기 위해 설계된 아키텍처 패턴
  • HTML DOM이 View, 자바스크립트가 Model의 역할
  • MVVM 패턴은 View와 Model 중간에 ViewModel을 둠으로써 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발의 편의성을 제공하기 위해서 만들짐.
    

• 컴포넌트 기반 프레임워크

  • 화면을 여러개의 작은 단위로 쪼개어 개발 → 재사용성↑, 구현 속도↑, 코드 가독성↑

• React.js와 Angular.js의 장점을 가지고 있음

  • React

  • 단방향 데이터 흐름 : 컴포넌트 단방향 통신 구조화 (상위 컴포넌트 → 하위 컴포넌트)
  

  • 가상 DOM 렌더링 방식 : 화면 전체를 다시 그리지 않고 Vue에서 정의한 방식에 따라 화면 갱신
  

• Angular

  • 양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화 →
  → 한쪽이 변경되면 다른 한쪽도 자동으로 변경
  

Vue vs React

• 공통점

  • 컴포넌트 개발
  • 상태유무
  • 라이프 사이클 (동작원리 똑같음)

• 차이점

  • 자유도
    • 조건에 따라 button을 보였다가 안보였다가 해야하는 상황

      // React 
      // && 연산자 방식
      <div>
      	{isVisible && <button>조건에 따라 사라질 버튼</button>}
      </div>
      
      // 삼항 연산자 방식
      <div>
      	{isVisible ? <button>조건에 따라 사라질 버튼</button> : null}
      </div>
      
      //Vue
      // if
      <div>
      	<button v-if="isVisible">조건에 따라 사라질 버튼</button>
      <button v-if-else="Visible">조건에 따라 사라질 버튼</button>
      <button v-else="isVisible">조건에 따라 사라질 버튼</button>
      </div>

    • 배열을 돌면서 리스트를 랜더링 해줘야 하는 상황

      const MyItems = [
            { id: 1, name: 'kkk' },
            { id: 2, name: 'is' },
            { id: 3, name: 'free' }
          ]
      
      // React 
      // map 1
      const item = MyItems.map((list) => <li key=list.id}>{list.name}</li>)
      return (
        <ul>
      	  {item}
        </ul>
      )
      
      // map 2
      return (
        <ul>
      	  {MyItems.map((list) => <li key=list.id}>{list.name}</li>)}
        </ul>
      )
      
      //Vue
      // for
      	<ul>
          <li v-for="item in MyItems" key: item.id>{{ item.name }}</li>
        </ul>

Vue 간단한 문법

• (plus count)

  <template>
  	<h2> {{ count }} </h2>
    <button @click="a">You clicked me</button>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const count = ref(0)
  
  const a =() => count.value + 1
  </script>

• 양방향 데이터 바인딩 (input form)

  // 상위 컴포넌트
  <template>
  	<h2>{{form.title}}</h2>
  	<h2>{{form.content}}</h2>
  
    <PostForm
        @submit.prevent="saveForm"
        v-model:title="form.title"
        v-model:content="form.content"
      >
    </PostForm>
  <f>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const form = ref({
    title: '',
    content: '',
  });
  
  const saveForm = async () => {
    const now = new Date();
    useAxios({
      ...form.value,
      createAt: `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`,
    });
  };
  </script>

  // 하위 컴포넌트
  <template>
    <form @submit.prevent.stop="saveForm">
      <div>
        <label for="title">제목</label>
        <input
          type="text"
          id="title"
          :value="title"
          @input="$emit('update:title', $event.target.value)"
        />
      </div>
      <div>
        <label for="content">내용</label>
        <textarea
          id="content"
          :value="content"
          @input="$emit('update:content', $event.target.value)"
        />
      </div>
    </form>
  </template>
  
  <script setup>
  cosnt porps = defineProps({
    title: String,
    content: String,
  });
  
  porps.title
  defineEmits(['update:title', 'update:content']);
  </script>
  
  <style>