인프런 커뮤니티 질문&답변

210님의 프로필 이미지
210

작성한 질문수

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

Provide / Inject

Emit관련 질문이용!

작성

·

184

1

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

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

답변 1

0

Blog Creator님의 프로필 이미지
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을 사용하고 있기 때문에 변하지 않는겁니다!

좋은 질문 감사드립니다!

210님의 프로필 이미지
210
질문자

답변 감사합니다만;;

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

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

Blog Creator님의 프로필 이미지
Blog Creator
지식공유자

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

210님의 프로필 이미지
210
질문자

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

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

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

Blog Creator님의 프로필 이미지
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 으로 그 값을 불러와서 사용할 수 있죠! 위에서도 얘기했듯이 읽기 용도로만 사용해야지 새로운 값을 덮어쓰면 안됩니다!

Blog Creator님의 프로필 이미지
Blog Creator
지식공유자

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

210님의 프로필 이미지
210

작성한 질문수

질문하기