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

eg2data님의 프로필 이미지
eg2data

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

반응형 기초 (Reactivity)

그래서.. 반응형 데이터는 무엇인가요?

작성

·

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

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

추가로, 반응형이 아닌 데이터를 v-bind하는 것은 어떤 목적으로 사용하게 될까요?

vue에서 반응형이 아닌 데이터를 선언하고 사용하는 것 자체가 좀 어색하게 느껴져서요.

eg2data님의 프로필 이미지
eg2data

작성한 질문수

질문하기