[Udemy Vue 완벽가이드 Section3] 40. 문제 이해하기

먼저 이 프로젝트의 목표는 'Goal'을 추가하는 것이다.

입력란에 'Finish the course!'같은 문구를 작성하여 'Add Goal'버튼을 클릭하면, 아래 list에 추가되는 식으로 goal이 추가되어야 한다.

또한, 출력된 list에서 goal을 클릭하면 list에서 삭제할 수도 있어야 한다.

 

 

 

먼저, 다른 것부터 해보자.

 

index.html

<section id="user-goals">
  <h2>My course goals</h2>
  <input type="text" />
  <button>Add Goal</button>
  <p>No goals have been added yet - please start adding some!</p>
  <ul>
    <li>Goal</li>
  </ul>
</section>

 

app.js

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

app.mount('#user-goals');

data프로퍼티의 goals가 없으면, ul요소가 출력되지 않아야한다. 그 대신 <p>가 출력되어야 한다.

반면, goals가 있을 경우, ul요소가 DOM에 렌더링되어 출력되어야 한다. 대신 <p>를 출력하지 않는다. 

즉, '조건부 렌더링'이 필요하다. 

 

 

모던웹 애플리케이션에서는 이러한 '조건부 렌더링'이 아주 유용하게 많이 쓰인다.

ex: 서버로부터 데이터를 fetch해서 도착할 동안, loading아이콘을 보여준다.

 

 

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