inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

쉽고 빠르게 배우는 Vue 3 기본 (Composition API)

Provide / Inject

Emit관련 질문이용!

262

210

작성한 질문수 3

1

제가 잘 이해가 안 가서 그렇습니만;;

provide/Inject 1:17에 카테고리를 클릭하면 name=List로 수정되서 List쪽이 렌더링 되야 하는데 왜 name이 Post로 계속 남아있는 걸까요?? change-id는 클릭을 했을 때만 수정 되야 하는 거 아닌가요??

vue.js notion vue-3

답변 1

0

Blog Creator

네 그렇습니다. 1:13쯤 영상을 잘 보시면 글 내용에 먼저 들어가는 것을 볼 수 있는데요. 즉, 글을 하나 클릭했기 때문에 List에서 change-id가 발생한겁니다.

그렇다는 것은 props로 받은 name값을 'Post'로 덮어쓴다는건데, 원래는 props로 받은 값을 덮어쓰면 안됩니다. 하지만 제가 이러면 안된다는걸 보여드리기 위해 비정상적인 동작을 보여드린건데요.

결과적으로 App에서는 "List"(ref)를 들고 있고 SiteMain에서는 "Post"(String)라는 값을 가지고 있게 됩니다.

이제 SiteHeader에 의해 change-category 이벤트가 발생해서 App의 name 값이 바뀌어봤자 SiteMain에 전달되는 name값은 무시하고 String 값의 name을 사용하고 있기 때문에 변하지 않는겁니다!

좋은 질문 감사드립니다!

1

210

답변 감사합니다만;;

그 말씀하신 change-category 이벤트가 발생해서 App의 name값이 바뀌어봤자 SiteMain에 전달되는 name값이 무시 된다는 것이 왜 무시되는 걸까요???

이미 props로 선언한 name값을 change-id이벤트로 Post라는 값을 이미 넣어줬기 때문에 change-category이벤트가 발생해서 List라는 값을 props로 넘겨도 무시된다는 말씀이신 건가요??

1

Blog Creator

SiteMain에 props로 내려오는 값과 name = "Post" 하며 생긴 name값이 달라서 생기는거 같습니다 props.name 과 name 이라는 값이 두개가 있어서 그런게 아닐까 싶네요

1

210

아 그게 자꾸 물어봐서 죄송합니다;;

만약 그렇다면 1:46초에 SiteMain에 change-id 이벤트를 설정해주고 거기에 name=Post라고 설정해 주셧는데 이건 어떻게 넘어간 걸까요??

그리고 defineProps({name })이라고 호출해주면 자동적으로 props.name이라고 생성되는 걸까요??

0

Blog Creator

질문은 언제나 환영이에요!

1) change-id 이벤트가 발생해서 name 값을 바꿔주는 곳이 SiteMain에서 App으로 바뀌었습니다! 그래서 App에 있는 name 값이 바뀌게 되는데요. App의 name 값은 props가 아니기 때문에 바꾸어도 되고, 바꾼 name 값이 props를 통해 SiteMain에도 반영이 되는거죠!

이전에는 App의 name 값이 props로 전달되는 것은 동일한데 SiteMain에서 바꾼다는 점이 다른데요. 원래 덮어쓰기가 안되어야 하는데 template에서는 그게 되버려서 문제가 생깁니다.

2) template에서는 name이란 값을 바로 사용할 수 있게 되고 script에서 사용하려면 defineProps의 반환값을 사용해야합니다.

const props = defineProps({ name });

그러면 그 뒤부터 props.name 으로 그 값을 불러와서 사용할 수 있죠! 위에서도 얘기했듯이 읽기 용도로만 사용해야지 새로운 값을 덮어쓰면 안됩니다!

0

Blog Creator

혹시 추가적인 질문이 필요하시다면 1대1 채팅이 가능하니 여기로 들어오셔서 말씀주세요 더 빠르게 답변 드리겠습니다!!
https://open.kakao.com/o/s3A2r1gg

노션 비즈니스 요금제로 워크페이스 새로 하나 생성해서 수업 따라하면 되는지요?

0

14

0

노션 : 파트3번 링크와 권한 , 파트4번 권한요청, 파트 5번도 미리 요청 드립니다.

0

25

4

인가 코드 발급(프론트 vs 백)

0

24

2

tailwind css 적용 잘 안되면 참고하세요.

0

24

1

질문드립니다.

0

32

0

목차 블럭이 활성화가 안되는 것 같아요!

0

25

0

unplugin-vue-components 질문드립니다.

0

37

2

강의듣다가 헷갈려서 질문드립니다.

0

31

1

와 짐코딩님 강의 들으면서 느끼는게 많네요.

0

32

1

질문드립니다.

0

32

2

(1)노션 사이트 공유 및 (2)갤러리 보기 기능에 대한 질문드립니다.

0

37

2

npm init vue@3.1.9

0

39

2

크롭 웹스토어 vue devtools 설치 관련

0

40

1

자막만 보이고 영상이 보이지 않습니다.

0

59

1

카카오 클라이언트 시크릿

0

193

2

snippets 작성하는 부분 설명이 있었나요?

0

48

2

ERD 질문

0

54

2

computed 의 set 함수를 통해 const 변수에 값을 담는 부분

0

52

2

자료

0

76

2

마지막 8챕터는 재생되지 않네요~

0

193

2

재밌는 강의였습니다!!

0

312

1

inject SiteHeader @click 에러 해결법

0

249

1

vuejs devtools가 안깔립니다 ㄷ;

0

279

1

v-on, v-model 강의 재생 불가 문제

0

415

2