Vue.js 선택한 이유
접근성 & 낮은 러닝커브 ( 쉽다 그렇지만 성능이 뛰어나다 )
협업에 있어서 약속된 기능들을 사용하기 때문에 코드가 명시적이다.
Vue.js 구조
SPA - 싱글 페이지 어플리케이션
HTML 파일 body 태그 안에서 보여지는 것들이 유저의 요청에 의해서 바꿔치기
SFC - 싱글 파일 컴포넌트
확장명은 .vue, 하나의 컴포넌트 안에서 HTML, CSS, JS 세가지가 관리됌.
Vue.js 개발스타일
Options API
data, methods, mounted 같은 객체를 사용하여 컴포넌트 로직을 정의하는 개발 스타일
옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출
data 메서드 : 해당 컴포넌트에서 사용될 state, 즉 데이터들을 관리해주는 곳
( data에서 반환된 속성은 반응적 상태가 돼서 this에 노출 )
Methods : 속성 값을 변경하고 업데이트 할 수 있는 함수, 템플릿 내에서 이벤트 핸들러로 바인딩 가능
( Methods에서 반환된 함수는 this에 노출 )
LifeCycle : 생명주기 훅은 컴포넌트 생명주기의 여러 단계에서 호출
Composition API ( 권장 )
import해서 가져온 내장 API 함수들을 사용하여 컴포넌트 로직을 정의
SFC에서 <script setup>으로 사용된다.
setup 속성은 컴파일 시 의도된 대로 동작하게 하는 코드 변환 키워드
ref, reactive : 반응성 있는 데이터를 만들 경우, 키워드 사용해서 변수 선언
const count = ref(0) => 초기값을 0으로 설정
const obj = reactive({ name : 'test', age : 30 })
methods : 컴포지션 API에서는 methods 객체를 선언할 필요가 없기 때문에 함수를 그냥 만들어 쓰면 된다.
function increment( ){ count.value++ }
ref로 참조한 데이터에 접근할 경우에는 value로 접근한다.
라이프사이클
어떻게 동작하고 어느 순간에 동작하는지 파악하려면 컴포넌트 ( 프로그래밍 인스턴스 )를 생성해야함
1. 컴포넌트 생성 ( 인스턴스는 객체지향 프로그래밍에서 Class에 소속된 개별적인 객체 )
예를 들어, user라는 클래스를 정의하고 park이라는 객체를 생성할 경우, park 객체는 user 클래스의 인스턴스가 된다.
ex)
( 붕어빵 틀이 class, 붕어빵이 object )
( 붕어빵 틀 클래스에서 '굽다'라는 메소드를 실행시켜서 객체를 굽는다. ) - 여기서 '굽다' 메서드가 라이프사이클
하나의 클래스를 사용하여 수많은 인스턴스를 생성할 수 있다.
만들어진 붕어빵이 인스턴스, 굽는 행위가 인스턴스화
=> 선언 됐을 때 객체, 객체가 메모리에 할당돼서 사용가능한 상태가 인스턴스
=> 만들었을 때 객체, 다 다른 맛의 붕어빵이 만들어져 판매 가능한 상태가 인스턴스
라이프사이클 테이블
핵심문법 1 - UserInterface
선언적 렌더링
- 이중 중괄호 문법을 사용 {{ }}
- 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석
- 실제 HTML을 출력하려면 v-html 디렉티브 사용
- 데이터 바인딩을 템플릿 부분에서 사용할 때 가장 많이 사용
Class와 Style 바인딩
- HTML Class 바인딩
v-bind : class ( 축약형은 :class )
객체로 바인딩 되며 클래스를 동적으로 토글하기 위해 객체를 :class에 전달 할 수 있음
isActive는 state 영역 ( data 영역 )에 선언한 임의의 변수고
true ( active ), false ( isActive ) 값을 가진다.
조건부 렌더링
v-if / v-else-if / v-else
v-show
v-if는 조건부로 블록을 렌더링하는데 사용되고 블록은 디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링 된다.
v-show는 사용법은 동일, 차이점은 v-show가 있는 엘리먼트는 항상 렌더링이 되어 DOM에 남아있다.
v-show는 Element의 display CSS 속성만 전환됌.
리스트 렌더링 ( v-for )
배열 데이터라는 특정한 타입의 데이터를 기반으로 동일한 구조의 UI를 반복호출하는 기능
v-for = "item in items" 문법 필요
item : 배열 내 반복되는 엘리먼트의 별칭
items : 선언한 배열 데이터
- items: 반복할 배열이나 객체.
- item: 반복되는 각 항목을 나타내는 변수.
결과는 Object.keys()에 기반
핵심문법 1 - UserInterface 실습
선언적 랜더링
클래스, 스타일 바인딩
v-if, v-show
v-show는 true, false 상관없이 항상 렌더링이 됨
v-if는 true 일때만 렌더링이 됌
v-show는 초기 렌더링 비용이 높고
v-if는 전환 비용이 높다. ( 전환 비용 : true, false에 따라 전환 )
v-for
키값 : 필수 ( 해당 데이터의 고유한 값 )
값이 하나인 경우는 배열 자료 이름 넣으면 됌
객체 데이터인 경우 고유한 값을 item.고유값 으로 넣는다
키값이 필수인 이유 ( 성능 )
Key값을 기준으로 렌더링 대상을 식별하면 부하가 적기 때문에 권장
어떤 item이 바뀌었는지 명확하게 식별 가능
<template>
<div>
<li v-for="item in sampleArray" :key="item">{{ item }}</li>
<li v-for="user in otherArray" :key="user.id"> {{ JSON.stringify(user).replace(/[{}]/g, '') }} </li>
</div>
</template>
<script setup>
import { ref } from 'vue'
const sampleArray = ref(['a', 'b', 'c', 'd', 'e']);
const otherArray= ref([
{ id: 0, name: 'John' },
{ id: 1, name: 'Park' },
{ id: 2, name: 'Lee' },
{ id: 3, name: 'Hwang' }
]);
</script>
<style></style>
v-for = "(item, index) in users" :key=" "
(item, index) in users 를 써야 하는 경우
1. 배열 자료 이름 item -> item의 index( 위치 )가 필요할 때 이렇게 사용
2. 배열 요소가 고유하지 않은 경우
- users 배열에 중복된 값이 있을 때 :key로 index를 사용하여 고유성 보장
3. 인덱스 기반으로 계산이나 조건 처리할 때
<template>
<ul>
<li v-for="(user, index) in users" :key="index">
{{ index + 1 }}. {{ user.name }}
</li>
</ul>
</template>
<script setup>
const users = [
{ name: 'John' },
{ name: 'Jane' },
{ name: 'Doe' },
];
</script>
// 결과
1. John
2. Jane
3. Doe
key값을 index로 쓸 때 주의할점
index는 배열 내에서 항상 고유하기 때문에, 순서가 바뀌지 않는 정적 배열에서는 문제없이 사용 가능
하지만, 요소의 추가/삭제/재배열이 빈번한 경우에는 고유 ID를 사용하는 것이 더 안전하고 효율적이고 권장됌
물론, index는 항상 고유한 값이지만
:key는 단순한 고유성 뿐만 아니라 DOM 업데이트의 효율성과 의미론적 일관성을 유지하는데 중요한 역할이기 때문
ex)
Cat Woman을 추가하면
key가 index인건 3번째 자리의 데이터던 Superman이 그대로 나옴
key가 배열자료명이면 데이터가 올바르게 삽입된다.
=> 정적 배열에서는 key값에 index를 넣어도 되지만
값이 수정, 재배치 등 자주 바뀌는 배열에서는 무조건 key값은 배열자료명
핵심문법 1 - Data
'Vue3 > 정리' 카테고리의 다른 글
| Vue3 강좌 한방 정리 -csslick (0) | 2024.12.13 |
|---|