본문 바로가기

Front-end26

Vue3 기초: 조건부 리스트 렌더링 지난시간에 배열과 객체 등을 리스트로 화면에 그려내는 것까지 해보았다. 이번에는 for 반복을 통하여 리스트를 그려내되, 조건에 따라서 특정 항목들만 그려내는 방법에 대해서 알아보도록 하자. 단순히 이전에 공부했던 v-for와 v-if(혹은 v-show)를 함께 사용하면 되지 않을까? 라고 생각하였지만, vue3에서는 한 태그에 v-for와 v-if를 함께 사용할 수 없도록 해두었다. 공식 홈페이지에는 v-if와 v-for가 같이 쓰이면 v-if가 먼저 평가된다고 적혀있지만 실제로 해보면 그냥 에러난다 그렇다면 어떻게 반복을 돌면서 조건문을 적용할 수 있을까? 방법에는 여러가지가 있겠지만 2가지만 소개하겠다. 먼저, 고계함수를 이용하는 방법이 있다. 그중에서도 filter가 아주 효과적이라고 볼 수 있겠.. 2022. 2. 21.
Vue3 기초: 리스트 렌더링 v-for를 이용하여 반복문을 사용할 수 있다. {{ fruits }} {{ index + 1 }}. {{ fruit }} 템플릿의 맨 윗부분에 머스태치 문법을 이용하여 배열을 바로 그리면 배열 자체로 나온다. 하지만 아래 li태그에 v-for와 같은 코드로 아래와 같이 화면에 반복적으로 그려줄 수 있다. 특이한건 bind되어있는 key속성인데, vue2에서와 vue3에서의 사용법이 살짝 다르지만 지금은 고유값(key)을 바탕으로 Vue의 가상 DOM트리에서 사용되는 값이라는 점 정도만 알고 지나가면 된다. vue2와 vue3에서의 key속성 차이를 알고 싶다면 여기서 확인하자 https://v3.ko.vuejs.org/guide/migration/key-attribute.html#%E1%84%87%E1.. 2022. 2. 16.
Vue3 기초: 조건부 렌더링 태그에 아래와 같은 속성을 주어서 조건에 해당할 때만 해당 태그를 렌더링 하게끔 설정할 수 있다. v-if v-else-if v-else 또한 v-if 와 v-show 모두 조건부 렌더링에 이용되는 속성이지만 v-show는 조건에 맞지 않는 경우에도 엘리먼트는 화면에 그려진다. 다만, display속성을 none으로 주어 화면에 보이지 않는 것 처럼하는 것이고 이와 달리 v-if의 경우는 조건에 맞는 경우 화면에 새로 엘리먼트를 만들고 조건에 맞지않는 경우 화면에 그려진 엘리먼트를 삭제하는 다소 복잡한 로직으로 돌아가기 때문에 한 어플리케이션 내에서 자주 상태가 바뀌는 엘리먼트에 조건부 렌더링을 거는 경우에는 v-if 보다는 v-show를 이용하는 것이 퍼포먼스 측면에서 유리하다. 2022. 2. 14.
Vue3 기초 : v-once v-once 속성을 태그에 주면 한번 렌더링 된 후에 프로퍼티 값이 변경 되더라도 다시 렌더링이 되지 않고 처음 렌더링 될 때의 값을 유지한다. 위와같이 코드를 짜면 화면에 그려진 input창에는 user의 name값이 자동으로 바인딩이 되고 값을 변경하면 v-once 속성의 여부에 따라 값이 변경되거나 변경되지 않는다. 2022. 2. 14.

티스토리툴바