Jae Front-end Study

결과 화면

생명 주기 훅

mounted()는 뷰의 생명 주기 훅 중에 하나이다.

DOM에 노드 생성 및 삽입(초기 렌더링)이 된 직후이다.

1. BaseKeyVisual 컴포넌트 만들기

• components/base/BaseKeyVisual.vue

1. <picture> HTML 태그를 사용해 뷰포트에 따라 다른 이미지를 적용할 수 있게 만든다. (피씨 이미지, 모바일 이미지)
2. kvActive 속성을 false로 설정해 이미지가 화면에 보이지 않게 만든다. css도 opacity: 0; 으로 한다.
3. mounted()에 setTimeout을 사용해 kvActive 속성을 true로 바꿔 렌더링이 된 직후 'active' 클래스가 붙도록 만든다.
4. 'active' 클래스가 붙으면 opacity: 1; 이 되고, transform 등 다른 효과를 추가해도 된다.

<template>
  <div
    class="base-key-visual"
    :class="{ 'active': kvActive }">
    <picture>
      <source :srcset="kvMoImgSrc" media="(max-width: 720px)">
      <img :src="kvImgSrc" alt="Key visual">
    </picture>
  </div>
</template>

<script>
export default {
  name: 'BaseKeyVisual',

  props: {
    kvImgSrc: {
      type: String
    },
    kvMoImgSrc: {
      type: String
    }
  },

  data() {
    return {
      kvActive: false
    }
  },

  mounted() {
    setTimeout(() => {
      this.kvActive = true
    }, 0)
  }
}
</script>

<style lang="scss">
.base-key-visual {
  overflow: hidden;
  width: 100%;
  background-color: #111;
  border-radius: 16px;

  img {
    width: 100%;
    opacity: 0;
    transform: scale(1.1);
    transition: all 2s;
  }

  &.active {
    img {
      opacity: 1;
      transform: scale(1);
    }
  }
}
</style>

2. 페이지에 BaseKeyVisual 컴포넌트 import 하기

• pages/index.vue

1. 만든 <BaseKeyVisual> 컴포넌트를 import 한다.
2. kvImgSrc, kvMoImgSrc 속성을 작성한다. 이미지 경로를 작성할 때에는 required('~~')를 사용한다.

<template>
  <TheLayout>
    <BaseKeyVisual
      :kvImgSrc="kvImgSrc"
      :kvMoImgSrc="kvMoImgSrc"/>
  </TheLayout>
</template>

<script>
import TheLayout from '@/components/layout/TheLayout'
import BaseKeyVisual from '@/components/base/BaseKeyVisual'

export default {
  name: 'Main',

  components: {
    TheLayout,
    BaseKeyVisual
  },

  data() {
    return {
      kvImgSrc: require('@/static/image/kv.jpg'),
      kvMoImgSrc: require('@/static/image/kv.jpg')
    }
  }
}
</script>