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

Khan·2022년 12월 13일
0

TIL

목록 보기
15/19
post-thumbnail

프레임워크 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>

0개의 댓글