[vue3.js]const변수

`const`는 상수(Constant)를 정의할 때 사용되지만, 가변 변수를 포함하는 객체나 배열을 정의할 수 있습니다. 여기서 "가변"이라는 의미는 객체나 배열의 참조(reference)는 고정되지만, 그 내부의 값은 변경할 수 있다는 것입니다.

### `const`의 특성

1. **상수 참조**:
   - `const`로 선언된 변수는 재할당할 수 없습니다.
   - 한 번 할당된 값은 다시 다른 값으로 변경할 수 없습니다.

2. **가변 객체/배열**:
   - 객체나 배열을 `const`로 선언하면, 그 내부의 속성이나 요소는 변경할 수 있습니다.

### 예시

```javascript

// 원시 값에 대한 const
const myNumber = 5;
myNumber = 10; // 오류: Assignment to constant variable.

// 객체에 대한 const
const myObject = { key: 'value' };
myObject.key = 'newValue'; // 정상: 객체의 속성 값 변경
console.log(myObject); // { key: 'newValue' }

// 새로운 객체 할당 시도
myObject = { newKey: 'newValue' }; // 오류: Assignment to constant variable.

// 배열에 대한 const
const myArray = [1, 2, 3];
myArray.push(4); // 정상: 배열에 요소 추가
console.log(myArray); // [1, 2, 3, 4]

// 새로운 배열 할당 시도
myArray = [5, 6, 7]; // 오류: Assignment to constant variable.

### Vue.js에서 `const`와 `ref` 사용

Vue.js에서 `ref`를 사용할 때 `const`로 선언하는 것은 `ref` 자체의 참조가 변하지 않음을 의미합니다. 하지만 `ref`의 값은 변경 가능합니다.

```javascript

import { ref } from 'vue';

const projects = ref([/* initial array */]);

// projects 변수 자체는 재할당할 수 없지만, 배열의 내용은 변경할 수 있습니다.
projects.value.push(newProject);
projects.value = projects.value.filter(project => project.id !== projectId);

위의 예시에서 `projects`는 `const`로 선언되었지만, `projects.value`는 여전히 가변적입니다.

### 결론

`const`는 변수에 새로운 값을 재할당하지 못하게 하지만, 객체나 배열의 경우 내부 값은 변경할 수 있습니다. 따라서 `const`로 선언된 변수는 참조 자체가 고정되지만, 그 내부의 값은 가변적일 수 있습니다. 이는 Vue.js와 같은 프레임워크에서 상태 관리에 유용하게 사용됩니다.