[vue.js] Composition API 사용해서 팔로워 페이지 만들기

스트링·2024년 4월 4일
instagramvue

vue 인스타그램

목록 보기
14/14
post-thumbnail

프로젝트가 커지면 커질수록

데이터가 100개…

함수 200개…

등등 여러 코드들이 찢어지고 그거 오류나서 찾는데에만 엄처안 에너지 낭비이다

관련된 코드들을 찢어놓지 않고 개발하는 방법이 뭐가 있을까?

그래서 지금 알려드립니다..

composition API

지금까지 따로 코드를 분리했던 방법은 Options API 라고 한다

그냥 우리가 기존에 해왔던 방식임

composition API를 쓰면 관련있는 코드를 한 곳에 모을 수 있다

필수는 아니고 그냥 편할때 선택해서 쓰면 될듯

MyPage라는 컴포넌트를 새로 하나 만들고

한번 container 컴포넌트 안에 한번 박아보자

//Container.vue
import MyPage from './MyPage.vue'

<div v-if="step == 3">
<MyPage/>
</div>
//MyPage.vue

<template>
  asda
</template>

<script>
export default {

}
</script>

<style>

</style>

step=3으로 설정했을시에 페이지가 잘 구동되는 모습을 확인 할 수 있다.

MyPage는 그냥 팔로워 목록을 띄울거다.

//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 {

}
</script>

<style>

</style>

이런식으로 html 코드를 짜주면 다음과 같이 팔로워 목록 틀이 보인다.

원하면 코드 그냥 복붙하거나 반복문 사용해서 사용자 늘리면 될듯

이제 데이터를 통해서 팔로워 목록을 주우우욱. 보여주자

프로필 데이터 5개를 바탕으로 GET 요청으로 불러와보자

public 폴더에 follower.json 만들고 넣어라

[
  { "id" : 0, "name" : "_Limvely", "image" : "https://picsum.photos/200?r=0" },
  { "id" : 1, "name" : "salmon_X", "image" : "https://picsum.photos/200?r=1" },
  { "id" : 2, "name" : "360noscope", "image" : "https://picsum.photos/200?r=2" },
  { "id" : 3, "name" : "Jeony_1", "image" : "https://picsum.photos/200?r=3" },
  { "id" : 4, "name" : "mihyeon", "image" : "https://picsum.photos/200?r=4" }   
]

응응 이거 넣어…

응응 만듬..

이름, 이미지 등등의 데이터가 포함되어 있다.

public 폴더 특징은 build를 해도 안변하기에

여기 있는 파일도 GET요청이 가능하다

이제 json데이터를 axios로 ajax해서 가져와보자

그러면 vue가 알아서 json → object로 자동 변환 해줌

<script>
export default {
    name : 'MyPage',
    data(){
        return{

        }
    },
}
</script>

원래였으면 이런식으로 데이터에 박아서 부르는 식으로 했지만

이번에는 Composition API를 사용할거임 ㅎㅎ

Composition API

setup() 을 하나 만들어 주자

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

setup() 안에서 데이터도 생성, 조작 할 수 있고

method, computed, watch 도 만들수 있고

hook도 걸 수 있다!

거의 모든 기능 개발을 setup에서 가능함

setup() 안에서 데이터 생성하는 방법

import {ref} from 'vue';

export default {
    name : 'MyPage',
    setup(){
        let follower = ref([]);
        return {follower}
    },

이렇게 적어주시면 follower : [] 이라는 데이터를 만든거랑 똑같은 효과이다

ref() 라는 함수를 import 해와서 var 데이터이름 = ref(데이터) 안에 항상 데이터를 저장해줘야함

안그러면 데이터 변경시 실시간 재렌더링이 안됨

그리고 마지막에 return { 데이터이름 } 이렇게 뱉어주셔야

위에 HTML란에 가서 {{데이터이름}} 이렇게 사용이 가능합니다.

안그러면 데이터바인딩 못함

데이터는 ref()에 담고 return을 따로 해줘야지 위 코드에서 데이터 바인딩이 가능하다

    <span class="profile-name">{{ follower }}</span>

이런식으로 프로필 옆에 보이시죵?ㅋ

이제 ajax로 팔로워 데이터 가져워서 ref에 한번 꽂아보자

import {ref} from 'vue';
import axios from 'axios';

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

        axios.get('/follower.json').then((a)=>{
            follower = a.data
        })
        return {follower}
    },

다음 처럼 ajax 요청을 했는디 제대로 반영이 안댐…

왜 안되냐

데이터를 조작하기 위해서는 문법이 따로 있음

import {ref} from 'vue';
import axios from 'axios';

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

        axios.get('/follower.json').then((a)=>{
            follower.value = a.data
        })
        return {follower}
    },

업로드중..

그냥 벨류만 붙혀주면 되넹…ㅠ;

데이터 자체는 제대로 온걸 확인할수 있다.

Lifecycle hook 쓰는 법

컴포넌트가 부착될 때, 업데이트될 때 뭔가 실행하고 싶으면

created() mounted() beforeUpdate() 이런거 쓸 수 있다

Composition API 안에서는 이거 함수명이 약간 다름…

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

        onMounted(()=>{
            axios.get('/follower.json').then((a)=>{
            follower.value = a.data
        })
        })
  1. onMounted() 이런 훅을 import 하고
  2. onMounted(()=>{ 마운트후에 실행할 코드 }) 이렇게 작성한다

그래서 저는 ajax 요청을 mount 후에 실행하고 싶어서 이렇게 작성한거임

여기서의 lifecycle 함수명은 그 원래 이름 앞에다가 on만 붙이면 된다.

beforeUpdate() 이런건 예를 들어서 onBeforeUpdate() 이렇게 사용하시면 된다

created() 이건 onCreated() 이렇게 쓰면 안됨 ㅠㅠ

이런 함수 없음.

왜냐면 setup() 이 공간 자체가 그냥 created() 이거랑 매우 유사한것 같음

거기다가 코드짜면 그냥 created() 안에 코드 짠거랑 비슷하게 동작함

활용 예제 : 5개 프로필데이터 받아온걸 HTML로 5개 모두 보여주기

<div style="padding:10px;">
  <h4>팔로워</h4>
  <input placeholder="?" />
  <div class="post-header" v-for="(a,i) in follower" :key="i">
    <div class="profile" :style="`background-image:url(${a.image})`"></div>
    <span class="profile-name">{{a.name}}</span>
  </div>
  • 코드 설명 이 코드 조각은 Vue.js 템플릿의 일부이며 팔로어 목록을 표시하도록 설계되었습니다. 루핑(v-for) 및 바인딩(:style, :key)을 위한 Vue 지시문 구문을 사용하여 구성 요소의 follower 데이터를 기반으로 콘텐츠를 동적으로 렌더링합니다. 구성 요소와 기능에 대한 분석은 다음과 같습니다.

    1. 컨테이너 Div: padding: 10px;가 있는 가장 바깥쪽 <div> 요소는 팔로어 목록의 컨테이너 스타일을 지정합니다.

    2. 제목: 영어로 "팔로워"로 번역되는 "팔로워" 텍스트를 표시하는 <h4> 태그가 이 섹션의 제목 역할을 합니다.

    3. 입력 필드: 자리 표시자 "?"가 있는 <input> 요소 팔로어 목록과 관련된 검색 또는 필터 기능을 위한 것일 수 있습니다. 그러나 Vue의 반응성 시스템이나 메소드에 연결하는 v-model이나 이벤트 처리 지시문이 부족합니다.

    4. 팔로워 목록: <div class="post-header" ...> 요소는 v-for="(a,i) in follower" 지시어를 사용하여 Vue 구성 요소의 'follower' 데이터 속성입니다. 각 항목(a)은 팔로어를 나타내며 i는 루프의 현재 항목의 인덱스입니다.
      - :key="i": 루프 인덱스를 각 항목의 key 속성에 바인딩합니다. 이는 Vue가 특히 업데이트 중에 반응성과 성능 최적화를 위해 각 노드의 ID를 추적하는 데 도움이 됩니다.
      - 프로필 이미지 Div: 하위 <div class="profile">은 동적 스타일(:style="Background-image:url(${a.image})")을 사용하여 설정합니다. 각 팔로어의 프로필 사진을 배경 이미지로 사용합니다. 이는 배경 이미지 URL을 각 팔로어의 image 속성에 바인딩하여 수행됩니다.
      - 프로필 이름: <span class="profile-name">은 {{a.name}}으로 묶인 각 팔로어의 이름을 표시합니다. 여기서 a.name은 ` 'follower' 데이터 배열에 있는 현재 항목의 name' 속성입니다.

      이 조각은 각각 프로필 이미지와 이름이 포함된 팔로어 목록이 표시되는 UI 세그먼트를 생성하도록 설계되었습니다. v-for 및 :style과 같은 Vue 지시어를 사용하면 follower 배열을 기반으로 이 목록을 동적으로 렌더링할 수 있어 구성 요소가 팔로어 데이터의 변경 사항(예: 팔로어 추가 또는 제거)에 반응하도록 만듭니다.

profile
스트링
PM과 서비스 기획자를 희망합니다.
이전 포스트

[vue.js] Progressive Web App & 셋팅

0개의 댓글