# [Vue 00] vue 기초

## 반응형

### reactive

```javascript
import { reactive } from 'vue'

const state = reactive({ count: 0 })
```

다음과 같이 반응형 변수를 사용할 수 있음

### 업데이트타이밍

반응형이 작동하기 위해서는 DOM 자동 업데이트 시간을 기다려야함. 이때 동기적으로 적용되지 않기 때문에 만약 어떤 상태변경이 완료 된후 특정작업을 하고 싶다면 nextTick()을 사용하면 됨 

```javascript
import { nextTick } from 'vue'

function increment() {
  state.count++
  nextTick(() => {
    // 업데이트된 DOM에 접근 가능
  })
    //이후에 오는 작업들은 업데이트 완료된 이후인가?
}
```

### 깊은 반응형

기본적으로 reactive는 깊은 반응형으로 중첩된 객체나 배열의 요소를 변경할 때도 변경이 감지됨 .

### 언제끊어지나

반응형 객체의 속성을 로컬변수에 할당하거나 분해하면 반응형 연결이 끊어짐

```javascript
const state = reactive({ count: 0 })

// n은 state.count에서 연결이 끊긴 로컬 변수입니다.
let n = state.count
```

### ref

.value에 값을 넣어 ref객체에 래핑 후에 반환한다.

```javascript
const count = ref(0)
// const count  = reactive({value: 0})
console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1
```

값으로 객체를 가지는 경우 객체 전체를 반응형으로 대체할 수 있다.

```javascript

let state = reactive({ count: 0 })

// 위에서 참조한 ({ count: 0 })는 더 이상 추적되지 않습니다. (반응형 연결이 끊어졌습니다.)
state = reactive({ count: 1 })

const objectRef = ref({ count: 0 })

// 이것은 반응형으로 작동합니다
objectRef.value = { count: 1 }
```

state는 새로운 프록시를 반환하지만 ref는 value의 값을 수정함. 이때 value는 반응형으로 추적되고 있기 때문에 반응형으로 작동함.

### ref의 언래핑

1. 최상위 속성의 ref를 템플릿에서 접근시 자동으로 언래핑됨 

2. ref가 다른 반응형객체의 속성으로 들어가면 접근이나 변경시 자동 언래핑됨

3. 단, 배열이나 기본 컬렉션 유형의 속성으로 들어간다면 .value가 필요함

## computed

```javascript
<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 계산된 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>책을 가지고 있다:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>
```

computed()함수의 매개변수 : getter로 사용될 함수 / return값 : computed ref

이때 의존하고 있는 변수들의 변경을 감지하고 있다가 변경이 감지되면 computed값을 다시 계산한다.

## 클래스 & 스타일 바인딩

### 클래스 토글

```javascript
<div :class="{ active: isActive }"></div>
```

### 컴포넌트

```javascript
<!-- 컴포넌트가 사용될 때 -->
<MyComponent class="baz boo" />
```

렌더링결과

```javascript
<p class="foo bar baz boo">안녕!</p>
```

### 스타일 바인딩

```javascript
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
```

그냥 쓰면 됨

## 조건부

### v-if

v-else와 같이사용됨 

### v-show

DOM에서 렌더링은 되지만 CSS display 속성을 안보이게 바꿈

## watch

watch(감시될 소스 , 콜백 함수, 추가 옵션들)

콜백함수는 주로 변경된 값과 이전값을 인자로 받는것이 권장되지만 없어도 됨!!

```javascript
watch(
      value,
      (newValue, oldValue) => {
        console.log('value changed:', newValue, oldValue);
      },
      { deep: true }
 );
```

For the site tree, see the [root Markdown](https://slashpage.com/yejun-cheon.md).