Vue3/코딩애플 part3

[Vue/코딩애플/part3] 12. Composition API (ref, onMounted())

김나나_ 2024. 8. 6. 14:28

options API 를 이용하면 .vue 파일이 길어지게 된다.

methods, computed 가 엄청 많아지면 코드가 복잡해진다.

이러한 단점을 보완한 것이 Composition API 이다.

computed, methods, watch, data() 이런걸로 쪼갤 필요 없이 관련 기능을 한 곳에서 쭉 코드를 짜면 된다.

(대신 문법이 조금 복잡해짐)

 

🔎 컴포넌트마다 options API, Compostion API 를 선택할 수 있다.

 

📌 Compostion API 를 이용하여 마이페이지 만들기

 

Compostion API 를 이용해 마이페이지를 만들어보자

components 파일에 MyPage.vue 를 생성했다.

<template>
  <div style="padding : 10px">
  <h4>팔로워</h4>
  <input placeholder="검색" />
  <div class="post-header">
    <div class="profile"></div>
    <span class="profile-name">사용자명</span>
  </div>
</div>
</template>

<script>
export default {
  name: 'MyPage',
}
</script>

<style>

</style>

 

MyPage.vue 는 Container.vue 의 하위컴포넌트이다.

 

MyPage 에서 불러올 데이터를 public 폴더 하위에 follow.json 이란 파일로 저장했다.

 

🔎 public 폴더 : 해당 폴더 안에 있는 것들은 build 해도 변하지 않음

=> 여기 있는 파일도 가끔 GET 요청 가능

 

🔎  json 데이터?

array, object 랑 똑같음 (다른 점은 따옴표가 있음) 웹상에서는 json 데이터로 주고 받을 수 있음

json 데이터를 axios 로 가져오면 json -> object 로 자동 변환 해준다.

 

 

 

setup() 안에 원하는 코드를 작성하면 된다.

export default {
  name: 'MyPage',
  setup () {
    
  }
}

 

setup() 안에서 데이터 생성, 조작, mothods 만들 수도 있고, hook 도 걸 수 있다.

거의 모든 기능 개발을 setup() 한 곳에서 가능하다고 보면 된다.

setup(){} 내에 작성하는건 created() hook 안에 작성하는 거랑 비슷하다고 생각하기

 

데이터 생성 하는 법 : ref(데이터)

ref 를 쓰려면 import 해와야 한다.

import {ref} from "vue";

let 데이터이름 = ref(담을 데이터)

retrun {데이터이름}

 

실시간 데이터 랜더링을 할 수 있는 이유는 reference data 덕분이다.

=> 모든 데이터를 reference data type 으로 감싸야 실시간 반영이 가능

 

데이터는 ref() 에 담고, return {} 해줘야 template에서 사용 가능하다.

(script setup 이용 시 return 필요 X)

 

⚡ 실시간 랜더링이 필요한 데이터는 ref 를 이용

 

setup() {
    let follower = ref(['홍길동','김철수']);

    return {follower}
}

 

이렇게 셋팅하고 html 에서 출력해보면 {{ follower }}

 

잘 노출되고 있다.

 

요즘은

<script setup>

</script>

이렇게 만들고 여기에 코드를 작성해도 된다

- <script setup> 안에 코드를 작성하게 되면 sutup() 에 코드를 작성하는 것과 동일하다

- 변수를 return 하지 않아도 html 에서 바로 사용 가능하다.

 

 

 

 

 

axios 로 팔로워 데이터 (follower.json) 을 가져와서 HTML 에 꽂아보자.

import axios from "axios";
axios.get('/follower.json').then((res)=>{
      console.log('res.data > ', res.data)
})

 

 

성공적으로 axios 호출을 했다.

 

follwer 라는 변수에 데이터를 담고 싶다면,

follower.value = 담을 데이터

 

setup() {
    let follower = ref([]);

    axios.get('/follower.json').then((res)=>{
      follower.value = res.data; // 데이터 담고 싶다면 변수명.value
    })

    return {follower}
  }

 

ajax 호출을 mounted() 안에서 하고 싶다면? onMounted(()=>{실행할 코드}) 사용

얘도 import 를 해주어야 한다.

import {onMounted, ref} from "vue";

 

setup() {
    let follower = ref([]);

    onMounted(() => {
      axios.get('/follower.json').then((res) => {
        follower.value = res.data; // 데이터 담고 싶다면 변수명.value
      })
    })
    
    return {follower}
}

 

 

훅을 사용하고 싶다면

1. onMounted() 이런 훅을 import 해오기

2. onMounted(()=>{마운트 후에 실행할 코드})

 

⚡ setup() 공간 자체가 created() 와 매우 유사하므로 created 는 사용할 필요가 없음

 

- 데이터끼리, 함수끼리, 컴포넌트 끼리 모아서 정리하고 싶으면 optionsAPI 사용
- 관련된 기능끼리 모으고 싶다면 Compostion API 사용

 

 

axios 로 받아온 데이터를 for 문과 바인딩문법을 활용하여 노출시키면 다음과 같은 화면이 된다.

 

초간단 마이페이지 완성

저작자표시