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 문과 바인딩문법을 활용하여 노출시키면 다음과 같은 화면이 된다.
초간단 마이페이지 완성
