devfrontendVue.js

[Vue.js 3.x]컴포넌트 기초

Related POST

컴포넌트 Basic

컴포넌트

  • 이름이 있는 재사용 가능한 인스턴스
  • 다른 컴포넌트에 import 해서 사용 가능
  • UI이일 수도 있고, 페이지 내의 특정 기능 요소 일 수도 있음
  • 컴포넌트 관리
    • Vue CLI로 최초 프로젝트 생성시 src 밑에 components 폴더 생성
    • vue-router 추가시 src 밑에 views 폴더 생성
  • 실제 프로젝트시 폴더 사용
    • views 폴더에 페이지라고 부르는 화면 하나하나에 해당하는 vue 컴포넌트 파일 생성
    • components에는 다른 vue에서 호출해서 공통으로 사용가능한 라이브러리형 컴포넌트 파일을 생성하고 관리

컴포넌트 구조 이해하기

  • 기본 뼈대를 snippet으로 만들어 놓고 사용 가능하다
  • 가장 자주 이용하는 기본 코드를 스니펫에 등록해보자 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <template>
      <div></div>
    </template>
    <script>
    export default {
      name: '', //컴포넌트 이름
      components: {}, //다른 컴포넌트 사용시 컴포넌트 import하고, 배열로 저장
      data() { //html과 자바스크립트 코드에서 사용할 데이터 변수 선언
        return {
          sampleData: ''
        };
      },
      setup() {
      }, //컴포지션 API
      created() {
      }, //컴포넌트가 생성되면 실행됨
      mounted() {
      }, //template에 정의된 html 코드 렌더링 후 실행됨
      unmounted() {
      }, //unmount 완료 후 실행됨
      methods: {} //컴포넌트 내에서 사용할 메서드 정의
    }
    </script>

팁

  • 라이프 사이클 훅에 따라 프로그램을 적절히 배치하면 로딩 시간 개선 가능하다. 예를들어
  • 화면에서 제일 먼저 보여줘야 하는 데이터 영역의 경우 created()에 정의해 미리 서버에서 받아오고
  • 화면 로딩 이후 삽입되어도 되는 데이터나 html객체 부분은 mounted() 훅에 정의하는 식이다
  • 이런 팁으로 데이터와 html 부분을 로딩하는 타이밍을 적절히 분배 가능하다

data binding

  • Vue는 Angular와 마찬가지로 양방향 바인딩 지원

양방향 바인딩

  • 모델에서 데이터 정의 후 뷰와 연결하면 모델과 뷰중 한쪽이 변경시 다른 한쪽에 반영

데이터가 문자열

  • 이중 중괄호를 이용해서 데이터를 바인딩

데이터가 raw html

  • 이중 중괄호를 하면 html태그가 아닌 문자열, 즉 텍스트로 인식한다
  • html을 raw하게 출력하려면 v-html 디렉티브를 사용해야 한다 : <div v-html="raw html이 들어있는 객체이름"></div>

input 데이터가 텍스트

  • input type=text는 입력받은 텍스트는 value에 저장이 된다
  • v-model은 내부적으로 이 value속성을 사용하게 된다
  • data()에 정의된 데이터 키명을 v-model에 넣어주면 모델인 data와 뷰인 input의 value가 양방향 바인드

데이터가 number일때

  • <input type="number" v-model.number="numberModel">
  • 사용자 입력값을 문자가 아닌 숫자로 바로 처리 가능
  • 프로그램 내에서 문자가 아닌 숫자로 관리됨

Textarea

  • <textarea>{{message}}<//textarea>로 착각할 수 있지만 아니다
  • <textarea v-model="message"><//textarea>처럼 v-model을 사용하자

select박스

  • input type=text와 동일하게 v-model이 내부적으로 select의value속성을 사용해서 양방향 바인딩을 한다

체크박스

  • 체크박스의 경우 특이하게 v-model은 내부적으로 value가 아닌 checked 속성을 사용한다
  • 따라서 체크박스의 value에 바인딩하려면 v-bind:value를 사용해야 한다

라디오 버튼

  • 라디오버튼도 체크박스처럼 v-model이 checked속성과 바인딩 된다
  • 라디오 버튼도 value에 바인딩하려면 v-bind:value를 해야한다

html 속성

  • value를 제외한 객체의 속성에 바인딩시 v-bind: 디렉티브를 사용한다
  • v-bind를 사용하고 :(콜론)으로 약어를 사용 가능
  • 실제 개발에서 많이 사용되는 유형
    • img 객체의 src : <img v-bind:src="imgSrc"/>
    • Button 객체의 disable
      • 경험 많은 개발자일 수록 버튼의 disabled속성을 반드시 활용
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        <!-- input에 데이터가 들어가야 버튼 활성화 -->
        <template>
            <div>
                <input type="text" v-model="textValue"/>
                <button type="button" v-bind:disabled="textValue===''">click</button>
            </div>
        </template>
        <script>
            export default {
                data() {
                    return {
                        textValue : ""
                    }
                }
            }
        </script>

클래스 바인딩

  • 필수 클래스는 기존 html처럼 class속성에 입력
  • 조건 바인딩만 v-bind:class를 이용해서 추가적인 정의
  • 클래스가 덮어쓰여지지 않고 공존

인라인스타일 바인드

  • 인라인 스타일의 경우 데이터를 오브젝트로 선언해서 v-bind:style로 바인딩

리스트 렌더링 : v-for

배열 데이터 : v-for 디렉티브 이용해서 바인딩

  • 사용법 v-for=”(item, index)in items”

렌더링 문법 : 조건에 따른 렌더링 → v-if, v-show

v-if

  • 예시 : <h1 v-if="isRender">true test</h1> <h1 v-else>false test</h1>
  • v-if디렉티브에 true가 리턴시 해당 태그가 렌더링, false인 경우 화면에 렌더링 되지 않는다
  • v-else로 else 표현식을 사용할 수 있으며 v-else-if디렉티브로 else if 표현식을 사용 가능하다

v-if vs v-show

  • v-if의 경우 조건을 만족하는 순간 html블록이 생기고, 만족하지 않으면 해당 html블록 삭제
  • v-show는 무조건 html블록 생성되나 조건에 따라 css의 display로 화면에 보이고 숨기도록 처리
  • v-if가 더 많은 자원 소모 : 실제로 해당 블록 전체를 생성했다가 삭제
  • v-show는 처음에 무조건 html블록을 생성하는데 자원을 사용하게 됨
  • 실무적으로 해당 블록이 자주 toggle되면 v-show를, toggle 빈도가 적으면 v-if를 사용한다

이벤트 처리 v-on

  • vue 컴퍼논트에서 이벤트 처리시 v-on 디렉티브 사용
  • 심볼 @를 사용해서 약어로 사용 가능

클릭 이벤트 : v-on:click

  • 메서드명이나 실제 함수를 사용할 수도 있다
    • 메서드명 : 해당 메서드명을 가진 메서드를 실행
    • 여러개도 가능 : <button @click="one(), two()"></button>

change 이벤트

  • 해당 이벤트가 가장 많이 사용되는 태그 : 셀렉트 박스
  • 사용자가 옵션을 바꿀 때마다 change 이벤트 발생

key 이벤트

  • 키 넘버로 비교하는 것은 deprecated됨
  • 사용예시) 엔터키 : <input @keyup.enter="submit"/>
  • key 이벤트
    • .enter
    • .up
    • .down
    • .left
    • .right
    • .tab
    • .delete : Del키, Backspace키 모두 해당
    • .esc
    • .space
  • 컨트롤, 쉬프트, 알트등의 특수키의 경우엔 다음처리 가능
<!-- alt + enter -->
<input @keyup.alt.enter="clear"/>
<!-- ctrl + click -->
<div @click.ctrl="doit">do it </div>

computed, watch

computed

  • A+B를 보여주는 C라는 함수가 있음
  • C를 여러번 보여주면 A+B를 여러번 결합하고 C를 여러번 호출해야함
  • computed로 A+B를 C로 설정하면 한번만 계산 후 저장후 추후 호출시엔 저장값만 호출
  • 기본 데이터인 A와 B가 변할때만 C 설정 다시

watch

  • watch역시 computed처럼 데이터값이 변경이 일어나는지 감시하고, 변경시 지정된 함수를 실행 가능
  • computed의 경우 기존 정의된 데이터 기반으로 새로운 데이터 값을 활용
  • watch는 watch에 정의된 데이터 값 하나만을 감시하기 위한 용도
  • watch의 경우 computed와 다르게 초기에 할당된 값에서 실제 데이터 변경이 일어나기 전까지는 실행되지 않음

Related POST

공유하기