[Vue.js 프로젝트 투입 일주일 전] 5장 - 컴포넌트 Basic

5.1 컴포넌트란?

  - 컴포넌트: View (HTML), Code (JavaScript), Data의 세트

5.2 컴포넌트 구조 이해하기

  - 컴포넌트 기본 구조

  - Snippet 설정

  - Snippet 사용

<template>
  <div></div>
</template>

<script>
export default {
  components: {}, // 다른 컴포넌트 사용 시 컴포넌트를 import하고, 배열로 저장
  data() {
    // HTML과 JS 코드에서 사용할 데이터 변수 선언
    return {
      sampleData: '',
    };
  },
  setup() {}, // Composition API
  created() {}, // 컴포넌트가 생성되면 실행
  mounted() {}, // template에 정의된 HTML 코드가 렌더링된 후 실행
  unmounted() {}, // unmount가 완료된 후 실행
  methods: {}, // 컴포넌트 내에서 사용할 메소드 정의
};
</script>

  - Lifecycle Hooks

    - beforeCreate

    - created

    - beforeMount

    - mounted

    - beforeUnmount

    - unmounted

5.3 데이터 바인딩

  - 문자열 데이터 바인딩 (텍스트 데이터 바인딩)

    -이중 중괄호를 이용해서 데이터 바인딩 (텍스트 바인딩)

  - raw(원시) HTML 데이터 바인딩

    - v-html 디렉티브 사용

  - form 입력 데이터 바인딩

    - v-model 디렉티브를 사용하여 양방향 데이터 바인딩 생성
      - 내부적으로 서로 다른 속성 사용하고, 서로 다른 입력 요소에 대해 서로 다른 이벤트 전송

    - input type="text"

      - v-model 디렉티브 사용 (내부적으로 input 태그의 value 속성 사용)

    - input type="number"

      - v-model.number 디렉티브 사용

    - textarea

      - v-model 디렉티브 사용

    - select

      - v-model 디렉티브 사용 (내부적으로 select 태그의 value 속성 사용)

    - 체크박스 (input type="checkbox")

      - v-model은 내부적으로 체크박스의 checked 속성 사용

      - v-bind:value를 이용하여 체크박스의 value 속성에 데이터 바인딩

        - 체크/해제 되었을 때 기본 값 변경 속성 => true-value, false-value

      - 여러 개의 체크박스 이용 시 배열을 이용해서 데이터 바인딩

        - value 값 반드시 지정

    - 라디오 (input type="radio")

      - v-model은 내부적으로 checked 속성과 데이터 바인딩

      - v-bind:value를 사용하여 value 속성 데이터 바인딩

  - 속성 (Attribute)

    - img 객체의 src

      - v-bind:src 또는 :src 이용

    - button 객체의 disabled

      - v-bind:disabled를 이용하여 값이 비어있는 경우 비활성화

      - 활용

        - 조회화면에서 조회 조건 중 필수 입력 조건이 모두 입력되었을 때 버튼 활성화

        - 등록화면에서 필수 입력 조건이 모두 입력되었을 때 버튼 활성화

        - 권한이 있는 사용자에게만 허용되는 버튼 활성화

  - 클래스 바인딩

    - v-bind:class를 사용하여 조건에 따라 바인딩할 클래스 정의 가능

      - 기본 클래스와 데이터 바인딩 처리할 클래스 공존해서 사용 가능

    - 배열을 사용해서 클래스 바인딩 가능

      - 조건 분기 처리 못함

  - 인라인 스타일 바인딩

    - 데이터를 object로 선언해서 바인딩 가능

    - 배열을 이용해서 바인딩 가능

5.4 리스트 렌더링 (v-for)

  - 배열 데이터 렌더링 다중 처리

5.5 렌더링 문법 (v-if, v-show)

  - v-if

    - v-if: true 리턴 시 화면에 보임 (false는 안보임)

  - v-show

    - v-show: true 리턴 시 화면에 보임 (false는 안보임)

  - v-if와 v-show의 차이점

    - 내부적으로 렌더링 되는 방식에 큰 차이 있음

    - v-if: 조건 만족 시 그 순간에 html 블록 생성, 조건 만족하지 않으면 삭제됨

    - v-show: 조건 상관없이 무조건 html 블록 생성되며, css display 이용하여 표시/숨김 처리

    - 실무) 해당 화면에서 toggle 자주 일어나면 v-show 사용, 빈도가 적다면 v-if 사용

      - v-show는 초기에 무조건 html 블록 생성하는데 자원 사용

      - v-if는 실제로 해당 블록 전체를 생성했다가 삭제하므로 자주 toggle 발생하면 자원 많이 사용

5.6 이벤트 처리 (v-on)

  - 클릭 이벤트 (v-on:click)

    - 심볼 @ 사용 가능 (@click)

    - 클릭 이벤트를 통해 지정된 함수로 파라미터 전달하고 싶으면 함수 호출 시 파라미터 설정

  - Change 이벤트

    - @change 이용

  - Key 이벤트

    - @keyup.enter: 사용자의 엔터키 감지

    - 자주 사용되는 key event 제공

      - .enter

      - .up

      - .down

      - .left

      - .right

      - .tab

      - .delete(키보드 Del키, Backspace 키)

      - .esc

      - .space

5.7 computed와 watch

  - computed

    - Vue 인스턴스 내의 정의된 데이터 값에 변경이 일어났는지 감시,

       변경될 때마다 정의된 함수 실행됨

    - Vue 인스턴스 내에 정의된 데이터 값과 연관된 또 하나의 데이터를 정의해서 사용 가능하도록 해줌

    - 함수이자 동시에 Vue 인스턴스의 데이터

    - 기존에 정의된 데이터 값을 기반으로 새로운 데이터 값 활용하기 위해 사용됨

    - 정의된 데이터 값을 바탕으로 새로운 데이터 값 생성,

       새로운 데이터 값에서 참조하고 있는 기존 데이터 값의 변경 감지

    - 참조하고 있는 데이터 값의 변경과 상관없이 최초에 computed에 정의된 데이터 함수 실행

  - watch

    - Vue 인스턴스 내의 정의된 데이터 값에 변경이 일어났는지 감시,

       변경될 때마다 정의된 함수 실행됨

    - watch에 정의된 데이터 값 하나만을 감시하기 위한 용도로 사용

    - 실제 데이터 변경이 일어나기 전까지는 실행 안됨

---

[Source Code] Ch 05. 컴포넌트 Basic