TIL | Vue.js 란?

김윤희·2022년 9월 15일
0

나중에는 어떻게 될지 모르겠지만 현재는 리액트와 뷰가 대등하게 사용된다
(뷰의 깃허브 통계치를 보면 어떤 부분에서는 리액트보다 위에 있고 거의 대등한 수준으로 올라가고 있다) - 리액트보다 1년 늦게 나왔는데 차이를 따라잡고 있다

Vue.js란

  • The Progressive JavaScript Framwork
  • vue.js만 보면 React.js와 같이 Ui 라이브러리를 제공하고 있지만, vue.js에는 Progressive Framwork가 붙는다.

📍 Vue.js 와 React.js 의 공통점 ⭕

  • UI 라이브러리
    • 어떤 컴포넌트를 만들고 그 안에 내부적인 State를 따라서 동작하게 한다
  • Virtual DOM
    • 이전 html 상태와 이후 html 상태를 비교해서 바뀌어야하는 부분만 최소한으로 변경해서 html을 렌더링한다. 컴포넌트를 그 부분만 마운팅.
    • 브라우저의 총 리소스를 적게 사용할 수 있다
    • 페이지 전환시 페이지 깜빡이 현상이 사라진다
      (가상돔을 쓰게 된다면 컴포넌트 안에서만 최상위 root element는 유지하면서 그 안에 html 형태만 바뀌게 되기 때문에)

📍 Vue.js 와 React.js 의 차이점 ❌

  • React의 자바스크립트 확장 문법 JSX를 Vue.js에서는 사용하지 않는다
    • Vue.js JSX와 같이 선언형으로 element를 강제하지 않는다
    • Vue.js는 자체적인 파일 형태가 있다
      <template> // html을 하나의 파일에 바인딩을 해준다
      <div class="hello">Hello world!</div>
      </template>
      <script>
      export default{
      data() {},
      methods: {
      	someFunction() {}
      }
      };
      </script>
      <style>
      .hello{
      	color : red;  
      }
      </style>
  • 조건부 렌더링 방식의 차이
    • Vue.js는 div태그 안에 v-if라는 변수를 넣어서 조건문을 넣어주고
      <div v-if="show">Hi!</div>
    • React는 중괄호 안에 조건문을 넣어주면 조건부 렌더링이 가능했다
      {show && <div>Hi!</div>}
  • 여러 엘리먼트를 반복할 때
    • React는 배열과 관련된 함수 (for, 함수 등 개발자가 사용할 수 있는 방법이 많다)
      array.map((v,i) => <div key={i}>{v}</div>)
    • Vue.js는 무조건 v-for를 사용한다
      <div v-if="(v,i) in array" :key="i">{{v}}</div>
  • HTML 태크 안에 값을 넣을 때
    • React 중괄호 1개
      <div>{foo}</div>
    • Vue 중괄호 2개
      <div>{{foo}}</div>

Vue.js 시작하기

  • CDN을 사용해서 시작할 수 있다

  • HTLM 파일에서 라이브러리처럼 일부 사용이 가능하다

  • Vue CLI를 사용해서 바로 Vue 설치

    • npm install -g @vue/cli
      (뷰를 계속 만들어야하기 때문에 글로벌로 설치: 설치한 컴퓨터 어디서든 뷰 프로젝트를 만들 수 있다)
    • 굳이 따지자면 React에서 CRA로 프로젝트를 만드는 것과 비슷하다
  • vue create hello-world

    • 이 명령어로 vue 프로젝트를 시작할 수 있다
    • vue3까지 나왔지만 신규 기능보다 핵심 기본 기능을 알기 위해 지금은 vue2로 선택
    • npm run serve로 vue 생성한 프로젝트 서버 실행
  • 개발자 도구에서 사용하도록 크롬 확장 프로그램 설치

  • vs코드에서 Vue 3 snippets를 install 하고,
    vueinit을 치면 아래와 같이 코드를 작성할 수 있는 준비가 완료된다

0개의 댓글