작성
·
673
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요.
1) 반응형이 아닌 데이터도 쓰이나요? 어떤 목적으로 쓸 수 있나요?
2) 반응형이 아닌 데이터도 v-bind할 수 있나요? v-bind와 반응성은 어떤 관계가 있나요?
답변 2
1
안녕하세요 :)
v-bind
관련한 질문이시죠?
v-bind
는 Vue에서 컴포넌트 또는 HTML요소의 속성에 값을 적용(바인딩)할 때 사용하는 Vue 디렉티브 입니다.
주로 동적(반응형 상태)인 값을 바인딩 할 때 쓰이며, 그 스펙은 일반 변수(반응적이지 않은)도 바인딩 할 수 있습니다.
eg2data님 말씀처럼 주로 반응형 상태에만 바인딩 할 때 사용하는데요. 그렇지 않은 예시를 들면 애플리케이션에서 메뉴 목록을 담고있는 변수가 있다고 가정하겠습니다.
const menus = ['공지사항', 'Q&A', '커뮤니티'];
이러한 메뉴 목록(menus
)을 렌더링 할 때는
<ul>
<li v-for="menu in menus" :key="menu">{{ menu }}</li>
</ul>
이와 같이 렌더링 할 수 있으며 이 때 key
에 값을 바인딩 할 때 사용할 수 있습니다. 또한 <li>
요소가 자식 컴포넌트로 정의되어 있는 경우 값을 자식 컴포넌트에 전달 하기 위하여 사용할 수 있겠죠?
<ul>
<CustomLIComp
v-for="menu in menus"
:key="menu"
:menu="menu"
/>
</ul>
이제 배우시는 단계이다 보니 익숙하지 않고 지금은 정확히 이해가 되지 않을 수 있는데요. 반복해서 사용하다 보면 이해가 빡~! 오고 익숙해 지실 거에요~!
화이팅 🙂
0
추가로, 반응형이 아닌 데이터를 v-bind하는 것은 어떤 목적으로 사용하게 될까요?
vue에서 반응형이 아닌 데이터를 선언하고 사용하는 것 자체가 좀 어색하게 느껴져서요.