Vue의 컴포넌트와 데이터 바인딩

컴포넌트

Vue는 React와 유사한 폴더구조를 가진다. React에서 라우팅 되는 컴포넌트들을 src/page라는 폴더에 담아서 관리했다면, Vue는 src/views라는 폴더에 담아서 관리를 한다. 이외에 공통 컴포넌트는 React와 마찬가지로 src/components에 담아서 관리를 한다. 

 

데이터 바인딩

Vue는 React와는 다르게 양방향 데이터 바인딩을 지원한다. 학습을 하면서, React와 크게 차이를 느끼지 못해서 이 부분에 대해서는 추가 학습이 필요하다는 생각이 든다. 

 

React에서 데이터 바인딩을 할 때 {}를 사용했다면, Vue에서는 {{}}를 사용한다. 

 

아래의 코드는 {{}}를 사용해서 데이터를 바인딩 한 코드이다. htmlString의 값이 문자열이라면 세 번째 줄과 같이 바인딩을 하면 되지만, 만약 raw html 데이터라면 네 번째 줄과 같이 표현을 해야 한다. 

<template>
    <div>
        <div>{{ htmlString }}</div> 
        <div v-html="htmlString"></div>  
    </div>
</template>
<script>
export default {
    data() {
        return {
            htmlString: '<p style="color:red;"> This is a red string. </p>',
    }
},   
}
</script>

 

 

또한 form 입력 데이터 바인딩을 할 때는 v-model을 사용해야 하며, 예시 코드는 아래와 같다. 아래의 코드에서는 두 가지 예시 코드가 있는데, 만약 input 태그에 숫자를 입력해야 할 경우, v-model이 아닌, v-model.number를 사용해야 한다.

<!-- input -->
<template>
    <div>
       <input type="text" v-model="valueModel"/>
    </div>
</template>
<script>
export default {
    data() {
        return {
            valueModel: 'abc123'
    }
},   
}
</script>

<!-- number input -->
<template>
    <div>
       <input type="number" v-model.number="numberModel"/>
    </div>
</template>
<script>
export default {
    data() {
        return {
            numberModel: 123
    }
},   
}
</script>

 

 

이뿐만 아니라 v-bind를 활용한 img, button, class, style 등 속성에 데이터를 바인딩하는 방법도 있는데, v-model과 코드 구조가 유사하기 때문에 필요하다면 아래의 깃허브 링크에서 참고하면 될 것 같다.

https://github.com/rladydqls99/vuePrac/blob/main/src/views/DataBingdingAttr.vue