Vue.js mounted() 활용: 다양한 상황에서의 실제 예제

Vue.js에서 mounted() 라이프 사이클 훅은 컴포넌트가 DOM에 완전히 렌더링된 후 실행되는 중요한 시점입니다. 이 시점부터 DOM 요소에 직접 접근하여 조작하거나, 외부 API를 호출하여 데이터를 가져오는 등 다양한 작업을 수행할 수 있습니다. 이 글에서는 mounted()를 활용하여 실제 개발에서 자주 마주치는 다양한 상황들을 예시와 함께 자세히 살펴보겠습니다.

1. DOM 요소 직접 조작:

• 특정 요소에 이벤트 추가: mounted()에서 addEventListener를 사용하여 DOM 요소에 이벤트 리스너를 추가할 수 있습니다. 예를 들어, 버튼 클릭 시 특정 함수를 실행하도록 설정할 수 있습니다.
• DOM 요소 스타일 변경: style 속성을 직접 변경하거나 CSS 클래스를 추가/제거하여 DOM 요소의 스타일을 동적으로 변경할 수 있습니다.
• DOM 요소 크기 측정 및 레이아웃 조정: offsetWidth, offsetHeight 등의 속성을 사용하여 DOM 요소의 크기를 측정하고, 이를 바탕으로 레이아웃을 조정할 수 있습니다.
• 외부 라이브러리 초기화: Chart.js, D3.js 등 외부 라이브러리를 사용하여 차트나 그래프를 그릴 때, mounted()에서 해당 라이브러리를 초기화하고 DOM 요소에 연결합니다.

2. 외부 API 호출 및 데이터 가져오기:

• 데이터 초기 로딩: 컴포넌트가 처음 렌더링될 때 필요한 데이터를 서버에서 가져와 화면에 표시합니다. axios나 fetch API를 사용하여 비동기적으로 데이터를 요청하고, 응답받은 데이터를 컴포넌트의 데이터에 할당합니다.
• 웹소켓 연결: 실시간 데이터를 처리하기 위해 WebSocket을 사용하여 서버와 연결하고, mounted()에서 연결을 초기화합니다. 서버에서 받은 메시지를 바탕으로 화면을 업데이트합니다.
• 지도 API 활용: Google Maps API, Kakao Maps API 등 지도 API를 사용하여 지도를 표시하고, 마커를 추가하거나 사용자의 위치를 추적하는 기능을 구현합니다.

3. 타임아웃, 인터벌 설정:

• 데이터 자동 새로고침: 일정 시간마다 데이터를 새로 가져와 화면을 업데이트합니다. setInterval을 사용하여 주기적으로 데이터를 요청하는 함수를 실행합니다.
• 애니메이션 효과: setTimeout을 사용하여 애니메이션 효과를 구현합니다. 예를 들어, 요소를 나타내거나 사라지게 할 때 부드러운 전환 효과를 줄 수 있습니다.

mounted()는 Vue.js의 라이프사이클 훅(lifecycle hook) 중 하나로, 컴포넌트가 DOM에 마운트된 직후에 호출됩니다.

mounted()의 동작 시점

• 컴포넌트의 템플릿이 렌더링되어 DOM에 추가된 후 호출됩니다.
• 따라서 이 시점에는 컴포넌트의 DOM 요소에 접근할 수 있으며, 초기화 작업이나 DOM 관련 작업을 안전하게 수행할 수 있습니다.

mounted()와 axios

mounted()는 주로 비동기 데이터 가져오기(API 호출)와 같은 초기화 작업에 사용됩니다. API 호출을 통해 데이터를 받아오고, 컴포넌트가 로드된 후 데이터를 렌더링해야 할 때 유용합니다.

예제: mounted()에서 axios 사용

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <div v-if="loading">Loading...</div>
    <div v-if="error">{{ error }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      loading: false,
      error: null,
    };
  },
  methods: {
    async fetchUsers() {
      this.loading = true;
      this.error = null;
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        this.users = response.data;
      } catch (err) {
        this.error = 'Failed to load users: ' + err.message;
      } finally {
        this.loading = false;
      }
    },
  },
  mounted() {
    // 컴포넌트가 DOM에 마운트된 후 호출
    this.fetchUsers();
  },
};
</script>

<style>
h1 {
  font-family: Arial, sans-serif;
}
</style>

---

mounted()를 사용하는 이유

1. DOM 접근이 가능: mounted()에서는 컴포넌트의 DOM 노드가 이미 생성되었으므로 DOM 조작이나 DOM 의존적인 라이브러리를 초기화할 수 있습니다.
   • 예: 차트 라이브러리 초기화, 스크롤 이벤트 바인딩 등
2. 초기 데이터 로드: 서버에서 데이터를 받아와 컴포넌트에 렌더링할 준비를 할 때 적합합니다.
   • axios를 사용하여 API로부터 데이터를 가져오는 작업을 mounted()에서 수행하는 것이 일반적입니다.
3. UI와 상호작용 준비: UI를 렌더링한 후 사용자와의 상호작용을 위한 초기 설정 작업이 가능.

---

주의할 점

1. 서버 요청이 느리면 초기 렌더링에 영향을 줄 수 있음: mounted()에서 데이터를 가져오면서 UI를 차단하지 않도록 비동기 호출과 로딩 상태 관리를 해야 합니다.
2. 컴포넌트가 마운트 해제될 경우 취소 필요: API 요청이 마운트 해제 후에도 진행 중이라면 요청을 취소하거나 상태를 관리해야 메모리 누수를 방지할 수 있습니다.

mounted()를 사용할 때 권장 사항

• 데이터를 비동기적으로 가져오는 경우 반드시 loading 상태를 관리하고, 오류 처리를 추가하세요.
• 만약 동일한 데이터를 여러 컴포넌트에서 필요로 한다면, 데이터 페칭 로직을 Vuex, Pinia 등 상태 관리 라이브러리에 옮기는 것도 좋은 방법입니다.

아래는 mounted()를 다양한 상황에서 사용하는 예제를 보여줍니다.

---

1. 차트 라이브러리 초기화

차트 라이브러리(예: Chart.js)를 mounted()에서 초기화하여 데이터를 렌더링하는 예제입니다.

<template>
  <canvas id="myChart"></canvas>
</template>

<script>
import { Chart } from 'chart.js';

export default {
  data() {
    return {
      chartData: [10, 20, 30, 40],
    };
  },
  mounted() {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [
          {
            label: 'Sample Data',
            data: this.chartData,
            backgroundColor: ['red', 'blue', 'yellow', 'green'],
          },
        ],
      },
    });
  },
};
</script>

---

2. DOM 요소에 포커스 설정

폼이 렌더링된 후 입력 필드에 자동으로 포커스를 설정하는 예제입니다.

<template>
  <div>
    <input type="text" ref="inputField" placeholder="Enter your name" />
  </div>
</template>

<script>
export default {
  mounted() {
    // ref를 사용해 DOM 요소에 접근하여 포커스를 설정
    this.$refs.inputField.focus();
  },
};
</script>

---

3. 이벤트 리스너 추가

mounted()에서 윈도우 크기 변경 이벤트를 감지하도록 설정하는 예제입니다.

<template>
  <div>
    <h1>Window Width: {{ windowWidth }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowWidth: window.innerWidth,
    };
  },
  methods: {
    updateWidth() {
      this.windowWidth = window.innerWidth;
    },
  },
  mounted() {
    // 윈도우 크기 변경 이벤트를 감지
    window.addEventListener('resize', this.updateWidth);
  },
  beforeDestroy() {
    // 메모리 누수를 방지하기 위해 이벤트 리스너 제거
    window.removeEventListener('resize', this.updateWidth);
  },
};
</script>

---

4. 타이머 설정

mounted()에서 타이머를 설정하여 주기적으로 데이터를 업데이트하는 예제입니다.

<template>
  <div>
    <h1>Current Time: {{ currentTime }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleTimeString(),
      timer: null,
    };
  },
  methods: {
    updateTime() {
      this.currentTime = new Date().toLocaleTimeString();
    },
  },
  mounted() {
    // 1초마다 현재 시간을 업데이트
    this.timer = setInterval(this.updateTime, 1000);
  },
  beforeDestroy() {
    // 타이머 정리
    clearInterval(this.timer);
  },
};
</script>

---

5. 스크롤 위치 복원

페이지를 새로고침하거나 이동한 후, 이전 스크롤 위치를 복원하는 예제입니다.

<template>
  <div style="height: 2000px;">
    <h1>Scroll and Reload to See Effect</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    // 로컬 스토리지에서 스크롤 위치를 가져옴
    const savedPosition = localStorage.getItem('scrollPosition');
    if (savedPosition) {
      window.scrollTo(0, Number(savedPosition));
    }

    // 스크롤 이벤트로 현재 위치를 저장
    window.addEventListener('scroll', this.saveScrollPosition);
  },
  methods: {
    saveScrollPosition() {
      localStorage.setItem('scrollPosition', window.scrollY);
    },
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.saveScrollPosition);
  },
};
</script>

---

요약

mounted()는 컴포넌트가 DOM에 렌더링된 후 수행해야 하는 작업(초기화, 이벤트 리스너 등록, 외부 라이브러리 초기화 등)에 주로 사용됩니다. 각각의 사례를 통해 다양한 활용 방법을 익힐 수 있습니다. 필요한 특정 사례가 있다면 말씀해주세요! 😊

4. 기타:

• 스크롤 이벤트 처리: window.addEventListener('scroll', ...)를 사용하여 스크롤 이벤트를 감지하고, 특정 지점에 도달했을 때 특정 동작을 수행할 수 있습니다.
• 브라우저 크기 변경 이벤트 처리: window.addEventListener('resize', ...)를 사용하여 브라우저 크기 변경 이벤트를 감지하고, 레이아웃을 동적으로 조정할 수 있습니다.

주의사항:

• mounted() 이후에 데이터가 변경되면 Vue의 반응성 시스템이 자동으로 DOM을 업데이트하므로, 불필요하게 DOM을 직접 조작하는 것은 피해야 합니다.
• 비동기 작업을 수행할 때는 async/await 또는 Promise를 사용하여 코드를 더욱 명확하게 작성할 수 있습니다.
• mounted()에서 너무 많은 작업을 수행하면 초기 렌더링 속도가 느려질 수 있으므로, 필요한 작업만 최소화하는 것이 좋습니다.

mounted()는 Vue.js 컴포넌트의 라이프 사이클에서 매우 중요한 역할을 합니다. 다양한 상황에서 mounted()를 활용하여 컴포넌트를 초기화하고, 외부 데이터를 가져오며, DOM을 조작하는 등 다양한 작업을 수행할 수 있습니다. 이 글에서 소개한 예시들을 참고하여 mounted()를 효과적으로 활용하여 더욱 풍부하고 동적인 Vue.js 애플리케이션을 개발해 보세요.

추가적으로, 다음과 같은 내용을 포함하여 글을 더욱 풍부하게 만들 수 있습니다.

• 각 예제에 대한 코드 스니펫 제공
• created()와 mounted()의 차이점 설명
• mounted()에서 주의해야 할 점 상세 설명
• 실제 프로젝트에서 mounted()를 활용한 사례 소개
• Vue.js 외 다른 프레임워크에서의 mounted()와 유사한 기능 비교