📍Props- 자식 컴포넌트는 props를 통해 부모 컴포넌트로부터 데이터를 받을 수 있다- 먼저 props를 선언해야 한다 - msg props는 자식 컴포넌트의 블럭에서 사용 가능- defineProps의 반환값을 통해서 JS()에서 접근도 가능- 부모 컴포넌트에서 props를 자식 컴포넌트에 전달할 때는 어트리뷰트 형태로 전달한다- 동적인 값을 전달할 때는 v-bind를 사용하여 전달한다

📍Components- 자식 컴포넌트를 만들고 부모 컴포넌트에서 import해서 사용할 수 있다- 자식 컴포넌트 A Child Component! - 부모 컴포넌트

📍watch- watchers를 사용하면 사이드 이펙트를 반응적으로 수행할 수 있다- 예) 특정 값이 바뀌면 콘솔에 숫자 출력하기import { ref, watch } from 'vue'const count = ref(0)watch(count, (newCount) => { // yes, console.log() is a side effect console.log(`new count is: ${newCount}`)})- 위 예시에서 count의 값이 바뀌면 콜백 함수가 실행된다- ref 말고도 다른 타입의 데이터를 watch가 감지하게 할 수 있다- 예시 Todo id: {{ todoId }} Fetch next todo Loading... {{ todoData }}

📍Template Refs- 블럭 내부의 특정 엘리먼트를 참조해야 할 때 사용hello- ref에 접근하기 위해 먼저 ref를 어트리뷰트 값과 매칭되는 이름으로 선언해야 한다const pElementRef = ref(null)- ref는 null 초기값을 갖는다- 엘리먼트가 이 실행되기 전까지 아직 존재하지 않기 때문이다- ref는 컴포넌트가 마운트되고 나서부터 접근 가능하다📍Lifecycle Hook: onMounted()- 마운트 이후에 코드를 실행한다import { onMounted } from 'vue'onMounted(() => { // component is now mounted.})- Lifecycle hook: 컴포넌트 라이프사이클의 특정 순간에 호출되는 콜백 함수를 인자로 전달- ..

📍설치yarn add -D husky lint-staged 📍husky 초기화npx husky init- 그러면 .husky 폴더가 만들어지고, 그 안에 pre-commit 파일이 생긴다- pre-commit 파일에 pre commit hook을 작성할 수 있다- 그리고 설치한 내용을 반영하기 위해 커밋을 한번 해준다 📍husky 테스트- 일단 .husky/pre-commit 파일에 테스트 명령어를 입력해서 pre commit hook이 잘 동작하는지 테스트해본다echo "pre commit hook test"- 빈 커밋 날려보기 (VS Code에서 소스 컨트롤(GUI)로 커밋을 하면 husky 적용이 안되므로 터미널에 입력해야 함)git commit --allow-empty -m "test com..

📍computed()- 다른 반응형 상태(ref)에 기반한 새로운 반응형 상태를 만듬const filteredTodos = computed(() => { return hideCompleted.value // ref ? todos.value.filter((t) => !t.done) // ref : todos.value})- computed property를 만드는데 사용된 반응형 상태가 변경되면 computed property도 자동으로 업데이트됨- 전체 코드 Add Todo {{ todo.text }} X {{ hideCompleted ? 'Show all' : 'Hide completed' }}

📍v-for directive- v-for 를 사용하여 배열에 기반한 엘리먼트 리스트를 렌더링할 수 있다 {{ todo.text }} - 위 예시에서 todo는 지역 변수로, source array의 원소 엘리먼트를 나타내며,- v-for 엘리먼트 내부에서만 접근 가능 (함수 스코프처럼)- 나열되는 엘리먼트의 key 어트리뷰트에 유니크한 값을 전달해야 함📍리스트 렌더링을 업데이트하는 방법 2가지1. source array에 mutating 메서드 호출todos.value.push(newTodo)2. array 교체todos.value = todos.value.filter(/* ... */) - 초간단 todo list 예시- @submit.prevent => e.preventDefault(..

📍v-if directive- v-if 를 사용하여 조건부 렌더링 가능Vue is awesome!- 위 예시에서 awesome 변수가 truthy일 때만 엘리먼트가 렌더링됨- v-else, v-else-if 문으로 분기 처리 가능Vue is awesome!Oh no 😢- v-if directive가 있는 엘리먼트 아래의 v-else에 인자를 전달하지 않아도 됨