[Vue3] v-for를 이용해서 selector 옵션 리스트 담기

selector를 만들다 보면 UI 때문에 순수 selector 태그를 이용해서 만들기 보다는 커스텀 selector로 만드는 일이 많다.

간편하게 마크업 내에 옵션을 표기할 수 있지만 매번 페이지를 찾아야서 하나하나 수정하면 얼마나 번거로운가... 😭

물론 지금 작성하는 내용도 프론트단에서 v-for를 이용해서 관리하는거라 하드코딩이랑 별 다를게 없긴 하지만 그래도 코드의 깔끔함을 위해 옵션 리스트들을 배열에 담아서 띄워보는 방법을 알아보자.

<div class="select__box" @click="selectToggle">
	<button class="label">
		{{ label }}
	</button>
	<ul class="select__list" v-show="showList">
		<li class="item" v-for="(item, index) in emailDomains" :key="index">
          <button @click="selectDomain(item)">{{ item }}</button>
		</li>
	</ul>
</div>


<script setup>
  /** 이메일 도메인 리스트 */
const emailDomains = ref(['naver.com', 'gmail.com', 'hanmail.net', 'nate.com', 'daum.net', '직접입력']);
</script>

목표는 옵션들을 li 태그로 갯수 만큼 띄워 주는 것이다.

우선 emailDomains라는 변수를 선언하고 ref 안에 옵션에 사용될 리스트들을 배열로 작성한다.

🌟 ref 란?

ref는 반응형 참조를 생성하는 함수이다.
쉽게 말해서 컴포넌트의 상태 관리하는 함수로, 참조의 값이 변경되면 vue는 이를 감지하고 변경된 컴포넌트를 자동으로 다시 렌더링해준다.

v-for 함수는 vue에서 사용하는 for문인데 보통 인자로 item과 index를 받아서 사용한다.

여기서 item은 우리가 만든 emailDomains의 옵션 하나하나가 되는 것이고, index는 옵션의 번호라고 생각하면 된다.

for ~ in형태를 이용해서 v-for 함수를 작성해서 emailDomains의 리스트들을 가져오면 끝!