데이터 관리, 컴포넌트, 프롭스

데이터들이 많이모임

이전시간에는 방대한 양의 데이터는 export import로 관리한다고함 

 

 

app.vue

postdata = 엄청길어서 내가 여기 app.vue data(){}칸에 적으면 적다가 콜론 하나 빠져서 오류나고 정신나갈꺼같은 긴 데이터

는 임포트

 

(아 그걸 기억하셈 ! 왼쪽은 작명 오른쪽은 원래있는거)

게시물(작명) : postdata,(원래있던거)

사실 임포트를 postdata로 안하고 똥강아지로 했으면

게시물 : 똥강아지, 임

왜냐 임포트 당시에는 postdata 위치가 from '경로' 왼쪽이니깐 작명이거든

근데 왠만하면 임포트 작명은 파일명을 따라하셈.. 그게 정신건강에좋음 

 

 

Container = 보시다시피 컴포넌트임.

 

마찬가지로 방대한양의 html 덩어리는 component로 관리

근데 컴포넌트를 외부에서 임포트해서 쓰는데 기존에 부모파일(app.vue)에 있는 데이터 사용(데이터바인딩)이 안됨

왜 ?  - > 컴포넌트에는 데이터가 없으니깐 그럼 어떻게 해야함 ?  - > 있게해주면됨

그게바로 props 프롭스 ~ app.vue 에 들어가있는 데이터를 프롭스 (후룹스 ? ) 후루룹 한다~ 이말이야.

 

위 예제는 app.vue 에 서 컴포넌트로 Container를 쓰는데 Container 에서 컴포넌트로 post를 쓰는거임

이건 post 에서 데이터 받을때

app.vue. - > Container - >. post 이 방향으로 프롭스문법으로 데이터를 전달해주고 전달받은 데이터가 있으니 데이터 바인딩이 가능해지고 바인딩되어서 만들어진 html덩어리를 다시 위로 올려줌

post - > Container - > app.vue 별거없음 

여기서 똑같은 데이터인데 app 에서 Container 올때는 Array 임

Container 에서 post 갈때는 object임

 

해석 - > 지금 app.vue 에서 보내는 데이터의 형식이 object를 구성품으로 가지는 Array배열을 보낸다 이말임

어떤 데이터인지는 눈치껏 잘 판단해줘야함 ㅅㄱ . 

 

이렇게 데이터는 최상위 부모에 위치함 그게 국룰임 안그러면 데이터 추적이 넘 어려워짐 컴포넌트 만드는것도 3번 고민하고 만드셈

진짜 필요한건지 여기서도 사실 필요없는데 교육목적으로 만든거임 

 

아 지금까지 데이터 전달하는것만 설명함 템플릿에서 데이터 쓸때를 설명하자면

app.vue에서 Container 컨테이너쓸때

:게시물 = "게시물"
자 왼쪽에 게시물은 내가 app.vue 에서 받은 postdata를 게시물이라고 한거야 ! 
자 오른쪽에 게시물은 나의 app.vue의 postdata의정기를 이어받은 게시물이 Container 너에게 전달되었을때 게시물 이라는 이름 으로 사용된다 이거야

 

컨테이너에서 post 컴포넌트 쓸때

 

이런 것들은 3단계를 지켜줘야해 

 

임포트 시켜주고 

나만의 개성을 살려서 정의해주고

그리고 사용해주고

 

 

자 이렇게 정리해두면 컴포넌트 프롭스 데이터 관리 끝!!