[Udemy Vue 완벽가이드 Section3] 41. 콘텐츠 조건부 렌더링

goals가 없을 때(즉, goals 배열이 비어있는 경우), <p>를 출력하려고 한다. 

 

조건부로 렌더링되어야하는 요소에 적용할 수 있는 Vue 디렉티브 →  v-if

JavaScript의 if문과 기본적으로 같다. 특정 조건을 검사해서 조건을 충족하면 코드가 실행된다.

""큰 따옴표 사이에 특정한 조건을 전달하는데, Vue 디렉티브가 항상 그렇듯, 이런 큰따옴표 사이에는 JavaScript 표현식을 사용할 수 있으며, data, methods, computed 프로퍼티 등을 참조할 수도 있다.

 

 

goals.length가 0인지 검사해보자.

goals는 배열이므로, length 프로퍼티를 가진다. length가 0이면 goals가 없다는 뜻.

<p v-if="goals.length === 0">
 No goals have been added yet - please start adding some!
</p>

 

 

 

이번에는 goals에 간단한 string을 추가해보자.

const app = Vue.createApp({
  data() {
    return { goals: ["Finish the goals"] };
  },
});

그럼 <p>는 사라진다.

단지 화면에서 '시각적'으로만 사라지는게 아니라, 개발자도구에서 확인해보면 <p> 자체가 사라져서 없다.

( 대신 <!--v-if-->라는 placeholder가 있다. 이는 Vue에서 내부적으로 사용하여, goals가 다시 비는 경우, <p>를 어디에 추가할지 결정한다. )

 

 

이번에는 'Add goal'버튼을 눌렀을 때, 입력창에 입력된 값을 얻고, 그 값을 goals 배열에 추가하자.

 

우선 method를 추가해야한다. methods옵션에 addGoal()로 추가.

data객체에는 사용자가 입력창에 입력한 내용도 저장하자.(enteredGoalValue)

 

 

app.js

data(){
 return {
  goals: [],
  enteredGoalValue: "",
 }
},
methods: {
 addGoal(){
  this.goals.push(this.enteredGoalValue); //사용자가 입력한 내용을 goals에 push.
 }
}

 

index.html

<input type="text" v-model="enteredGoalValue" /> <!--input요소에 v-model로 enteredGoalValue 바인딩-->
<button @click="addGoal">Add Goal</button> <!--addGoal메서드를 이벤트리스너로!-->
<p v-if="goals.length === 0">
  No goals have been added yet - please start adding some!
</p>

 

input창에 입력 → data객체의 enteredGoalValue이 변경됨 → Add Goal 버튼 클릭 → 이벤트 리스너인 addGoal함수 실행 → data객체의 goals배열에 input창에 입력한 enteredGoalValue값이 추가됨 → goals의 length가 0보다 큼 → <p>요소가 사라진다.

 

이렇게 v-if를 사용한 조건부렌더링이 잘 작동된다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.