[VUE] 카테고리 필터링 기능 / vue transition 적용하기

🚀 vue Transition

1. Transition

• 엘리먼트나 컴포넌트가 돔에 들어갈 때와 나갈 때 애니메이션을 적용
• 내장된 컴포넌트. 그래서 등록할 필요없이 모든 컴포넌트의 템플릿에서 사용할 수 있음
• v-if 를 통한 조건적인 렌더링
• v-show 를 통한 조건적인 디스플레이
• 스페셜 엘리먼트인 <component>를 통해 동적인 컴포넌트 토글링

2. TransitionGroup

• list와 같이 여러 개의 태그가 들어가는 경우를 고려한 Transition 컴포넌트
• 감싸는 태그가 없이 v-for 등을 이용해 여러 개 태그가 들어가야함. 대신 tag 라는 속성을 통해 감쌀(wrap) 태그를 지정할 수 있음
• 리스트의 태그들은 각자 나타나거나 사라지고 순서만 바뀌기 때문에, 서로 영향을 주지 않음. 따라서 transition mode(out-in, in-out)가 없음.
• 각 태그들은 반드시 고유한 key 속성 값을 가지고 있어야 함.
• v-xxx와 같은 클래스는 그걸 감싸는 컨테이너(container)가 아닌 태그 각각에 들어감.
• 만약 컴포넌트의 template 속성을 사용한다면 <TransitionGroup>이 아닌 <transition-group>으로 사용해야 함.

 

1. HomeView.vue

<template>
  <div class="home" ref="parent">
   ...

    <!-- 카테고리 -->
    <Category :categoryType="categoryType" @setCategory="setCategory" />

    <!-- 상품 리스트 -->
    <MainList :categoryType="categoryType" />

  ...
  </div>
</template>

<script>
export default {
  components: {
    ...
  },
  data() {
    return {
      categoryType: "all",
    };
  },

  methods: {
    setCategory(value) {
      this.categoryType = value;
    },
  },
};
</script>

 

카테고리와 상품 리스트 컴포넌트에 데이터, 함수를 전달해야 하므로 그들의 상위 컴포넌트인 HomeView.vue에 변수, 함수 생성

 

2. Category.vue

<template>
  <!-- isScrollDown이 true일 때 categoryTop 클래스 적용 -->
  <nav class="categoryWrap" :class="{ categoryTop: isScrollDown }">
    <ul>
      <li @click="$emit('setCategory', 'all')">전체</li>
      <li @click="$emit('setCategory', 'outwear')">아우터</li>
      <li @click="$emit('setCategory', 'top')">상의</li>
      <li @click="$emit('setCategory', 'footwear')">신발</li>
      <li @click="$emit('setCategory', 'bags')">가방</li>
      <li @click="$emit('setCategory', 'stuff')">잡화</li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "Category",
  props: ["categoryType"],
  data() {
    return {
      nowScrollY: 0,
      isScrollDown: false,
      navTop: 0,
    };
  },

  methods: {
   ...
  },

  ...
};
</script>

<style lang="scss" scoped>
  ...
</style>

 

해당 li 클릭하면 $emit('setCategory')에 그 카테고리에 맞는 value 부여

3. MainList.vue

<template>
  <div>
    <h2>상품 목록</h2>
    <List :data="product" :categoryType="categoryType" />
  </div>
</template>

<script>
export default {
  components: { List },
  props: ["categoryType"],
  data() {
    return {
      product,
    };
  },
};
</script>

<style lang="scss" scoped>
  ...
</style>

 

4. List.vue

<template>
  <transition-group tag="ul" class="listWrap">
    <template v-for="item in data">
      <div
        v-if="categoryType === 'all' || item.category === categoryType"
        :key="item.id"
      >
        <MainItem :item="item" />
      </div>
    </template>
  </transition-group>
</template>

<script>
import MainItem from "@/components/Molecules/MainItem.vue";
export default {
  props: ["data", "categoryType"],
  components: { MainItem },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.listWrap {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* 트랜지션 전용 스타일 */
.v-enter-active,
.v-leave-active,
.v-move {
  transition: opacity 1s, transform 1s;
}
.v-leave-active {
  position: absolute;
}
.v-enter {
  opacity: 0;
  transform: translateY(-20px);
}
.v-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

...
</style>

 

(1) 카테고리에 맞는 데이터만 보여줌

(2) 여러 개의 태그가 들어가는 경우이므로 transition-group 적용

(3) <template> cannot be keyed. place the key on real elements instead. 라는 에러가 떠러 template 하위 태그인 div에 :key="item.id" 적음