튜토리얼 훑어보기 프로젝트

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => {return t !== todo})
  //todos.value = todos.value.filter((t) => t !== todo)
}

그냥 익명함수를 썼을 때 왜 안되지 싶었는데, return을 시켜주니까 된다.

{}를 해주게 되면, 그냥 내부에서 코드가 동작할 뿐 true 또는 false를 리턴해주지 않아서 그렇다.

 

const filteredTodos = computed(() => {
  // `todos.value` 및 `hideCompleted.value`를
  // 기반으로 필터링된 할 일을 반환.
  return hideCompleted.value 
  ? todos.value.filter((t) => !t.done) 
  : todos.value
})

이것도 마찬가지로 return이 붙어야 하네...

 

<script setup>
import { ref, watch } from 'vue'

const todoId = ref(1)
const todoData = ref(null)

async function fetchData() {
  todoData.value = null
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  todoData.value = await res.json()
}

fetchData()

watch(todoId, fetchData)
</script>

<template>
  <p>할 일 id: {{ todoId }}</p>
  <button @click="todoId++">다음 할 일 가져오기</button>
  <p v-if="!todoData">로딩...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

watch가 todoId를 감시하면서 값이 변할 때마다 fetchData 함수를 작동시킨다.

 

<script setup>
import ChildComp from './ChildComp.vue'

</script>

<template>
  <!-- 자식 컴포넌트 렌더링 -->
  <ChildComp />
</template>

타 파일에서 컴포넌트 불러오는 방법

 

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

<!-- 분리선 -->

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('부모 컴포넌트로부터 💌을 전달받았어요!')
</script>

<template>
  <ChildComp :msg="'greeting'" />
  <ChildComp :msg="greeting" />
</template>

greeting 변수 내의 값을 보낼 수도, 진짜 문자열 인자를 보낼 수도 있다.

prop을 통해 자식 컴포넌트를 보낼 수 있다.

 

근데 컴포넌트의 모든 인자가 주어지지 않았을 때에는 어떻게 해야 하는가?

 

근데 저 define props는 뭐지..?

<!-- ChildComp.vue --> <script setup> const props = defineProps({ msg: String }) </script>

 

위 코드가 갖는 의미가 뭘까?

defineProps?

저 코드가 UI를 의미할 수가 있나? 아니면 그 자체로 텍스트????

 

,,,아직 추가적으로 처리할 게 남아있다