vue3 Dom구조에 접근하기

서론

css에 대해서 이것저것 잘 알려주시는 유튜버이십니다.

https://www.youtube.com/watch?v=iLmBy-HKIAw&t=0s

 

우선 여기서는 html, css, js만으로 코드를 실행했기 때문에 이것을 vue3로 어떻게 옮겨야하는지에 대해서 많이 찾아보고 고민해봤습니다. 간단한 포트폴리오를 만들고 싶었고 best portfolio websites이란 영상을 보니깐 재밌는 기능을 추가하고 싶어서 글을 작성해봅니다!

 

본론

 

위에 gif는 제가 구현한 화면입니다.

가로 방향으로 이동하는 무한 스크롤링입니다.

아래는 해당 기능이 구현이 된 코드펜입니다.

Progressively enhanced infinite horizontal scroll (codepen.io)

Progressively enhanced infinite horizontal scroll

 

우선 작업을 수행하기 위해 기존의 자바스크립트와 똑같이 도전을 했는데 몇 가지 다른 점이 있었습니다.

1. setAttribute 추가

const div = document.querySelectorAll(".pages__container")

div.setAttribute("data-set", "true")

// 콘솔창 <div class="pages__container" data-set="true">DIVELEMENT</div>

기존 자바스크립트에서는 이런식으로 만들면 data-set이라는 attribute가 추가 되었습니다.

 

하지만, vue에서는 해당 방법으로는 안됩니다.

vue의 composition api로 접근을 하셔야합니다.

ref

const pages = ref(document.querySelector(".pages__container"));

pages.value?.setAttribute("data-set", "true")

<template>
  <div class="pages__container" ref="pages">ELEMENT</div>
</template>


<!-- 콘솔창 <div class="pages__container" data-set="true">ELEMENT</div> -->

이런식으로 ref로 값을 참조 받아서 사용을 해줘야합니다.

 

2. useEffect와 같은 기능 찾기

기존의 자바스크립트에서는 함수를 바로 실행을 하거나 리액트에서는 useEffect를 사용해서 함수를 렌더링이 일어나면 호출 가능했습니다

하지만 vue에서는 더 좋은 기능인 onMounted를 사용할 수 있었습니다.

const scrollers = ref(document.querySelector(".scroller"));
const lists = ref(document.querySelectorAll("li"));

const addAnimation = () => {
  scrollers.value?.setAttribute("data-animated", "true");

  const scrollerInner = document.querySelector(".scroller__inner");

  lists.value.forEach((item) => {
    const duplicatedItem = item.cloneNode(true);
    scrollerInner?.appendChild(duplicatedItem);
  });
};

onMounted(() => {
  addAnimation();
});

 

<div class="scroller" ref="scrollers">
  <ul class="tag-list scroller__inner" ref="scrollerInner">
    <li v-for="item in skillList" ref="lists">{{ item }}</li>
  </ul>
</div>

 

위의 영상 코드 중에 해당 애니메이션 이벤트가 있습니다. 최대한 동일하게 코드를 만들어봤습니다.

onMounted를 사용해서 렌더링이 일어나는 부분에서 코드가 실행되게 만들었습니다.

사실 렌더링이 일어난다 라는 개념보다 웹 페이지가 처음 실행됐을 때 발생하는 렌더링일 때가 맞는 표현입니다. 다른 부분이 렌더링이 되어도 저 함수가 실행되는 부분은 그대로 유지가 되니깐요.

 

정리

정말 많이 찾아봤습니다. 블로그, GPT, stackoverflow 등등...

해당 블로그에서 찾아서 사용할 수 있었습니다.

 

참고로 querySelectorAll을 사용할 때 주의 사항은 위의 코드펜과 같이 똑같이 사용하면 해당 scrollers.value.forEach에 값이 없습니다.

콘솔에 value를 찍으면 나오지만 배열속성을 사용하면 null값이 도출이 될 것입니다. 이런식으로 사용하지 말고 해당 태그에 직접 ref를 달아서 사용하는게 좋습니다. (queryselector만 사용해서 해당 태그와 직접연결)

querySelectorAll을 사용한 이유는 해당 li태그를 복사하기 위해서 사용한 것이고 복사가 된 node들은 setAttribute와 같은 기능을 사용 할 수 없습니다.