[Vue.js] Composition API 사용해보기_2

💡 실습 포인트!

• 오늘은 Composition API 를 사용하여 팔로워 검색기능을 만들어보았다.
• 아직 Composition API 사용이 미숙하여 이전에 공부한 내용들을 하나씩 찾아가며 코드를 작성해야하긴 했지만 계속해서 막히는 부분을 시도하여 최종적으로 기능을 잘 만들어냈다.
• 나는 match() 와 정규식을 이용했는데, 강사님은 indexOf() 를 이용하셨기에 코드 분석도 같이 진행해보았다.

---

💜 ref() 말고 reactive() 사용해보기

import { ref, reactive } from 'vue'

export default {
  setup(){
    let followers = ref([]);
    let test = reactive({name : 'Seoyun'})

    return { followers }
  },
}

• 데이터를 만들 때는 ref() 를 사용하라고 배웠지만 reactive() 도 import 해오면 동일하게 사용이 가능하다.
• ref() 를 사용하든 reactive() 를 사용하든 동일한 역할을 하는데 ref() 는 숫자, 문자와 같은 원시 자료형(Primitive data type) 을, reactive() 는 object, array 와 같은 참조 자료형(reference data type) 을 주로 담는다.
  (둘 다 동일한 함수이기 때문에 구분하기 귀찮으면 ref() 를 주로 사용해도 된다.)

---

💜 props 사용하기

import { ref, toRefs } from 'vue'

export default {
  setup(props){
    let followers = ref([]);
    let { props이름 } = toRefs(props)  
    console.log(props이름.value)
    return { followers }
  },
}

• Composition API 를 사용해서 개발할 때 setup() 안에 코드를 작성하면 되긴 하지만, setup() 안에서는 등록한 props 를 this.props 와 같은 형태로 가져다 사용하는 것이 불가능하다.
• 따라서, props 를 꼭 가져와서 뭔가 개발을 해야 하는 경우에는 위와 같이 코드를 작성한다.
• setup() 안에는 파라미터를 두 개까지 넣을 수 있는데, 첫번째 파라미터는 자동으로 props 가 되고, 두번째 파라미터는 context 이다.
• 단, 이를 그냥 사용할 수는 없고, 실시간 반영이 잘 되도록 사용하려면 ref() 안에 담아서 사용해야 한다.
• props 가 여러 개인 경우에는 ref() 가 아닌 toRefs() 를 import 해와서 이용하면 된다.
  (toRefs() 는 ref() 와 동일한 기능을 하되, ref() 를 여러 번 해주는 함수이다.)
• 그리고 toRefs() 를 사용할 때에는 등호 왼쪽에 { props이름1, props이름2 ... } 이런 식으로 코드를 작성해주면 된다.
• props 를 출력해보고 싶다면 .value 를 붙여서 출력해야 한다.

---

💜 watch 사용하기

import { ref, watch } from 'vue'

export default {
  setup(props){
    let followers = ref([]);
    watch( 데이터이름, ()=>{ 데이터에 변화가 발생할 경우 실행할 코드 } )
    return { followers }
  },
}

• Composition API 를 사용해서 개발할 때, setup() 안에서 watch 같은 것으로 데이터의 변화를 감시하고 싶으면 위와 같이 watch() 를 import 해와서 사용하면 된다.
• watch() 는 props 도 감시할 수 있다. 

---

💜 computed 사용하기

import { ref, computed } from 'vue'

export default {
  setup(props){
    let followers = ref([]);
    let 변수이름 = computed( ()=>{ return 10 } )
    console.log(변수이름.value)
    return { followers }
  },
}

• computed 는 데이터의 연산 결과를 잠깐 저장할 때 주로 사용한다.
• computed 를 사용하고 싶을 때에는 computed 를 import 해온 다음에 소괄호 안에 함수 하나를 만들어주면 된다.
• 그러면 해당 함수는 연산 결과를 return 해주는데 이를 변수에 담아서 필요한 곳에서 사용하면 된다.
• computed 도 일종의 데이터 취급을 받으므로 .value 를 적어주어야 잘 출력된다.

---

💜 methods 사용하기

import { ref } from 'vue'

export default {
  setup(props){
    let followers = ref([]);
    
    function hello(){
    
    }
    return { followers, hello }
  },
}

• Options API 에서는 일반 함수를 만들 때 methods 에 항목을 추가했지만, Composition API 에서는 setup() 안이라면 어느곳이든 함수를 만들 수 있다.
• 그리고 함수를 만들고 나서 return 안에 함수명을 적으면 <template></template> 에서도 사용이 가능해진다.

---

💜 Vuex store 사용하기

import { ref } from 'vue'
import { useStore } from 'vuex'

export default {
  setup(props){
    let followers = ref([]);
    let store = useStore();
    console.log(store.state.name)
    return { followers }
  },
}

• setup() 에서 $store.state.name 같이 Vuex store 를 사용하고 싶을 수 있다.
• 이 때는, 먼저 useStore 를 vuex 에서 import 해준다.
• useStore() 라고 적으면 이게 $store 와 동일한 의미를 지니게 되는데, 이를 store 라는 변수로 저장하면 $ 기호만 뗀 것처럼 거의 유사하게 state 를 뽑아내든지 commit() 을 하든지, dispatch() 를 하는 것이 가능해진다.
• 단, mapState 는 setup() 안에서 사용이 불가하다.

---

💜 팔로워 검색 기능 만들기

<input class="search" @input="search($event.target.value)" placeholder="🔍" />

 

import { onMounted, ref } from "vue";
import axios from "axios";

export default {
  name: "MyPage",
  setup() {
    let followers = ref([]);

    onMounted(() => {
      axios.get("/followers.json").then((result) => {
        followers.value = result.data;
      });
    });

    function search(input) {
      let filtered = followers.value.filter((follower) => {
        return follower.name.match(new RegExp(input, "i"));
      });
      followers.value = [...filtered];
    }

    return { followers, search };
  }
};

• 이전에 followers.json 파일에서 데이터를 추출하여 데이터바인딩만 해주었는데, 이번에는 해당 데이터들에서 input 에 입력한 문자가 포함된 사람들을 검색해주는 검색 기능을 만들어보았다.
• 먼저 input 에 @input 속성을 추가하여 input 이 수정될 때, search() 라는 함수에 input 에 입력된 값을 파라미터로 전달해주었다.
• 이제 search()는 filter() 를 사용해서 follower 데이터 하나하나를 input 에 입력된 값과 비교해주었다.
• 그리고 입력된 값과 follower 를 비교할 때에는, match() 를 사용해서 input 에 입력된 값을 대소문자 상관없이 follower 가 포함하고 있으면 해당 follower 를 return 해주었다.
• 그리고 이 값을 filtered 에 저장한 다음, 안전하게 filtered 를 복사해서 followers.value 에 넣어주었다.
• 근데 여기까지하면, 검색을 하고 지우면 팔로워 목록에서 팔로워들이 사라지는 문제점이 발생했다.
• followers 에서 필터링을 해서 followers 에 재할당을 하고 또 거기서 필터링이 진행되는 게 반복되다보니 결국에는 아무것도 남지 않은 것이다.

 

import { onMounted, ref } from "vue";
import axios from "axios";

export default {
  name: "MyPage",
  setup() {
    let followersOriginal = ref([]);
    let followers = ref([]);

    onMounted(() => {
      axios.get("/followers.json").then((result) => {
        followersOriginal.value = result.data;
        followers.value = [...result.data];
      });
    });

    function search(input) {
      let filtered = followersOriginal.value.filter((follower) => {
        return follower.name.match(new RegExp(input, "i"));
      });
      followers.value = [...filtered];
    }

    return { followers, search };
  }
};

• 그래서 위와 같이 followersOriginal 이라는 followers 와 똑같은 데이터를 만들어놓고, 검색어를 삭제해서 followers 데이터는 수정되어도 followersOriginal 은 수정되지 않고 보존되므로 계속해서 필터는 followersOriginal 에서 진행하도록 코드를 수정해주었다.