props, emit 질문이 있습니다.

Question

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 질문이 있습니다ㅠㅠ props emit은 단방향바인딩인거고 v-model은 양방향바인딩인건가요??   이건 개인적인 질문인데요.. ㅜㅜ input text상자에 입력된 값을 props로 전달하려면 v-model은 양방향 바인딩하는거니까 사용하면 안되는건가요..?ㅜㅜ   양방향 바인딩이 화면에서 입력된 값을 자바스크립트에서 그때 그때 동일하게 바뀌게끔 하는거잖아요.. 그럼 props, emit이랑 관련이 전혀없는건가요? 여기 개념이 좀 헷갈리는 것 같습니다.. props+emit = v-model은 아닌거죠..?ㅜㅜ 그리고 수업하실 떄 Theview.vue를 사용하셨는데, 그 이유가 뭔지 궁금합니다ㅜㅜ 부모 자식관계에 대한 설명을 할 때 child, parent만 만들면 데이터가 잘 오고가는지 확인하기 위해서 theview.vue를 만드신건가요?ㅠㅠ

짐코딩 · Answer

안녕하세요. Props(속성) : 부모 컴포넌트에서 "값"을 전달 받을 때 사용됩니다. Emit(이벤트 발생) : 자식 컴포넌트에서 이벤트를 발생시키기 위해 사용됩니다. 그리고 데이터의 흐름에 따라 "단방향 바인딩"과 "양방향 바인딩"이라는 두 가지 주요 바인딩 방식을 제공합니다. 1. 단방향 바인딩 (One-Way Binding) : - 특징 : 데이터의 흐름이 한 방향으로만 이루어지며, 주로 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 하는 방식입니다. - 활용 방법 : 주로 props 를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다.   2. 양방향 바인딩 (Two-Way Binding) : - 특징 : 데이터의 흐름이 양방향으로 이루어지며, 사용자가 입력한 값을 바로 데이터에 반영하고, 반대로 데이터의 변경이 뷰에 반영되는 방식입니다. - 활용 방법 : v-model 디렉티브를 사용하여 양방향 바인딩을 설정합니다. 주로 입력 폼 요소와 함께 사용 됩니다. 이 질문을 제가 정정 드리면 -> "props emit은 단방향바인딩인거고 v-model은 양방향바인딩인건가요??" v-bind가 단방향이고, v-model이 단방향입니다.   이 질문은 제가 이해를 못했어요 -> "input text상자에 입력된 값을 props로 전달하려면 v-model은 양방향 바인딩하는거니까 사용하면 안되는건가요..?ㅜㅜ" 많은 경우에 대부분 <input v-model="" /> 이렇게 사용합니다.   지금부터 Props와 Emit은 머릿속에서 잠시 지워주시고요. v-bind, v-model을 충분히 이해하시고 학습하시면 될 것 같습니다. 아예 Props와 Emit을 잊어주세요. v-bind, v-model 이 무엇인지, 두 차이는 무엇인지를 두고 이해하시면 훨씬 쉬울거에요.