저번시간 숙제 & style 속성 데이터바인딩
지난번 데이터를 직접 바인딩 하는게 숙제였음
일단 너무 긴 데이터는 JS파일로 ㄱㄱ
export default
[
{
name: "Kim Hyun",
userImage: "https://picsum.photos/100?random=3",
postImage: "https://picsum.photos/600?random=3",
likes: 36,
date: "May 15",
liked: false,
content: "오늘 무엇을 했냐면요 아무것도 안했어요 ?",
filter: "perpetua"
},
{
name: "John Doe",
userImage: "https://picsum.photos/100?random=4",
postImage: "https://picsum.photos/600?random=4",
likes: 20,
date: "Apr 20",
liked: false,
content: "흔한 자랑스타그램",
filter: "clarendon"
},
{
name: "Minny",
userImage: "https://picsum.photos/100?random=5",
postImage: "https://picsum.photos/600?random=5",
likes: 49,
date: "Apr 4",
liked: false,
content: "우리집 개는 화장실 물도 내림",
filter: "lofi"
}
]
그리고 꼭 export default 처리해줘야함!!
안그럼 오류남 ㅠ
근데 우리가 생각해봐야할 것은
app.vue → Container.vue → Post.vue
3가지 형태로 감싸져 있어서 이중으로 데이터를 전달을 하는 점을 생각해줘야 한다.
그냥 props 두번 하면 된다.
Props
반드시 기억해라.
보내고 등록하고 쓰고 ㄱㄱ
일단은 app.vue에서 스크립트 부분에서 데이터 바인딩을 해주고
data(){
return{
게시물 : Postdata
}
}, 일차적으로 props 처리를 해주자
<Container :게시물="게시물"/>그리고 Container에서 props 코드도 마저 작성해주자
<script>
import Post from './Post.vue';
export default {
name : 'InstaContainer',
components: {
Post,
},
props : {
게시물 : Array,
}
}
</script>1차적으로 app → Container 으로 보내는 props는 완!
2차적으로 Container → Post 해줘야함
데이터 중에 0번째 데이터를 Post에 보내는거임
이제 Post에서 props도 따로 해야할듯
<script>
export default {
name : 'InstaPost,',
props : {
게시물 : Object,
}
}
</script>그냥 두번 props 한다고 생각하면 편하당ㅋ
<template>
<div>
<Post :게시물 = "게시물[0]" />
<Post :게시물 = "게시물[1]" />
<Post :게시물 = "게시물[2]" />
</div>그런 다음 Container 컴포넌트에서 일단은 하드 코딩으로 게시물을 props 단계에서 보내기 단계를 처리해주자
그러면 세 개의 게시물이 뜨는걸 볼수 있다!
근데 게시글이나 이름같은 데이터는 잘 적용됨을 볼수 있다!
근데 똑같은 사진임;ㅋ(사진 데이터 바인딩을 안해서 그럼)
다시 한번 다시 정리
일단은 우리는 밑에 사진 처럼 두개의 겹친 컴포넌트 구성을 따르고 있따.
app→container→post 이런 형식임
그래서 데이터 바인딩도 두번을 해줘야함
해봅시다.
일단은 우리는 데이터를 app.vue에서 등록을 해줘야함
데이터는 따로 JS파일로 빼서 export defualt 처리를 해주자
그다음 app.vue에서 데이터를 사용해야하니 데이터바인딩과 import 처리를 해주자
<script>
import Container from './components/Container';
import Postdata from './assets/Postdata'
export default {
name: 'App',
data(){
return{
게시물 : Postdata
}
},
components: {
Container,
}
}
</script>굿굿
이제 데이터적인 부분에서는 완!
props를 진행해주자
차근차근 container에서 부터 ㄱㄱ
우리는 post에 있는 데이터를 app.vue까지 처리해야하는거다
post import ㄱㄱ
그리고 props 처리도 ㄱㄱ
완. 했으니 게시물에 관련해 props을 해주고 이제 post로 ㄱㄱ
<template>
<div>
<Post :게시물 = "게시물[0]" />
<Post :게시물 = "게시물[1]" />
<Post :게시물 = "게시물[2]" />
</div>
</template>
<script>
import Post from './Post.vue';
export default {
name : 'InstaContainer',
components: {
Post,
},
props : {
게시물 : Array,
}
}최종 행선지는 결국 post.vue이다
결국에 props 메세지를 보내는 최초의 근원지임
<template>
<div class="post">
<div class="post-header">
<div class="profile"></div>
<span class="profile-name">{{게시물.name}}</span>
</div>
<div class="post-body"></div>
<div class="post-content">
<p>{{ 게시물.likes }}</p>
<p><strong>{{게시물.name}}</strong> {{게시물.content}}</p>
<p class="date">May 15</p>
</div>
</div>
</template>
<script>
export default {
name : 'InstaPost,',
props : {
게시물 : Object,
}
}
</script>props 처리 해주고 게시물에 관련한 데이터를 바인딩 하면 끗!
이미지 데이터 바인딩
이미지를 background-image url 형태로 표현해야지 잘보임.
<div class="profile" style="background-image: url();"></div>이런식으로 처리를 해주고 postdata에 있는 url을 박아주면 댐
userImage: "https://picsum.photos/100?random=3",
postImage: "https://picsum.photos/600?random=3",
//이거 박아 ㅋ근데 이런식으로 하면 코드의 길이가 너무 길어지기도 하고 귀찮음;
⇒ object 자료형으로 고고
<div class="post-body" :style="{backgroundImage : `url(${게시물.postImage})` }"></div>근데 그래도 존나게 기네…
백틱 기호로 $해서 이미지를 넣으면 매우 편리하다고 하다..
응응… 이제 각각 다른 사진 잘 나옴ㅋ
아까 하드 코딩 한거 반복문 ㄱㄱ
<template>
<div>
<Post :게시물 = "게시물[0]" />
<Post :게시물 = "게시물[1]" />
<Post :게시물 = "게시물[2]" />
</div> <div>
<Post :게시물 = "게시물[i]" v-for="(a, i) in 게시물" :key="i"/>
</div>이랬는데~ 오래 됐슘당~ 이지랄…
응응 잘되네.
느낀점
구조적으로 2차원적으로 되어있을때 props를 두번 해주면된다.
