[Vue] Binding

취업하기 전에 JS 프레임워크로는 ReactJS만 주구장창 파왔었는데
취업하고나니 Vue를 공부해야 되는 상황이라서
아무래도 React가 익숙한 저에게는 React와 같은 기능을 가진 Vue를 비교하면서 공부하려고
작성하는 글입니다.

기본적인 npm이나 node, vue설치같은 부분들은 구글링하면 많이 나오니 생략하겠습니다

🎁 바인딩

기본적으로 바인딩이라 함은 데이터, 스타일 등 변화요소가 있는 데이터들을 하드코딩을 하지 않고 UI에 표시하기 위해 사용하는 기술이라 할 수 있다.

Vue에서의 바인딩은 여러가지가 있다.

• 데이터 바인딩
• html태그 바인딩
• input value 바인딩
• textarea value 바인딩
• select의 option value 바인딩
• checkbox value 바인딩
• radio value 바인딩
• 이미지 바인딩
• 클래스 바인딩
• 인라인 스타일 바인딩 (배열 가능)
  ....

이 외에 내가 모르는 것들도 분명히 있겠지만, 일단 공부한 것은 여기까지이다.

하나씩 예시를 들어 보려한다.

🎲 데이터 바인딩

<template>
  <h1>{{ data  }}</h1>
</template>

<script>
export default {
  data() {
    return {
      data : 'hello, data"
    };
  },
};
</script>

script 태그 안에 data를 return하는 부분에, 원하는 data의 key를 작명하고 value값을 넣어준 후 template태그 안의 html태그 사이에 바인딩된 데이터를 넣어주면 된다.

바인딩된 데이터를 사용할 때에는 {{ 'i`m data' }} 이렇게 중괄호 사이에 감싸주어야 한다.

🎲 html태그 바인딩

<template>
  <div>
    <div>{{ htmlString }}</div>  // 이렇게 데이터바인딩 하는 것 처럼 하면 string으로 인식해서 그대로 나옴
    <div v-html="htmlString"></div>
  </div>
</template>

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

html태그를 바인딩은 말 그대로 element 요소 자체를 표현하고 싶을 때 사용한다.
주의해야할 점으로는, 데이터 바인딩을 했었던 것 처럼 {{ }} 안에 값을 넣게 된다면,
우리가 작성한 element요소를 string으로 인식을 해서 작성한 그대로 화면에 나온다.
그렇기 때문에, 원하는 요소의 속성으로 v-html="지정한 값" 으로 부여를 해야 원하는 결과를 얻을 수 있다.

🎲 input 바인딩

<template>
  <div>
    <input type="text" v-model="valueModel" /> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      valueModel: "South Korea",
    };
  },
};
</script>

v-model을 사용하면 유저가 입력하는 value를 바인딩 할 수 있다.
위 코드로는 South Korea라고 초기 value가 지정되어 있지만, 사용자가 입력을 하면, 해당 input의 value가 바인딩되어 data함수에 저장되는 것이다.

추가적으로는 v-model.number를 사용하면 사용자의 입력값을 바로 숫자로 처리할 수 있다.

🎲 textarea 바인딩

<template>
  <div>
    <textarea v-model="message"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "textarea is here",
    };
  },
};
</script>

input과 마찬가지로 v-model을 사용해 사용자가 입력하는 value를 data에 저장할 수 있다.

🎲 select의 option value 바인딩

select

<template>
  <select v-model="city">
      <option value="02">서울</option>
      <option value="21">부산</option>
      <option value="064">제주</option>
    </select>
</template>

<script>
export default {
  data() {
    return {
       city: "02",
    };
  },
};
</script>

select태그도 역시 v-model을 사용하여,

option의 선택된 value값을 data에 저장할 수 있다.

🎲 checkbox value 바인딩 (체크 여부확인과 다중선택)

• 체크 여부 확인

<template>
  <label><input type="checkbox" v-model="checked"/>{{ checked  }}</label>
   <!-- true,false값의 value를 바꿔주고 싶다면 아래와 같이 -->
  <label><input type="checkbox" v-model="checked" true-value="yes" false-value="no" />{{ checked  }}</label>
</template>

<script>
export default {
  data() {
    return {
       checked: true
    };
  },
};
</script>

체크의 여부를 확인하고 싶을 때도 역시 v-model을 사용하여 해당 value가 true인지 false인지 알 수 있다.

추가적으로 체크박스를 누를 때 마다 값을 변경해주고 싶다면, true-value와 false-value의 값을 지정해서 원하는 값을 띄워줄 수 있다.

• 다중선택을 받아야 할 경우

<template>
  <label><input type="checkbox" v-model="checked" value="서울" />서울</label>
  <label><input type="checkbox" v-model="checked" value="부산" />부산</label>
  <label><input type="checkbox" v-model="checked" value="제주" />제주</label>
  <br />
  <span>체크한 지역 : {{ checked }}</span>
</template>
<script>
export default {
  data() {
    return {
       checked: [],    // 배열로 데이터를 바인딩해서 한번에 처리할 수 있다.
    };
  },
};
</script>

checkbox에서 다중value를 받아야 할 경우에는, 위와 같이 데이터를 배열로 바인딩을 하고, 각각의 checkbox의 v-model을 동일하게 적용하면 다중선택도 가능하고, 선택된 값들이 배열로 만든 데이터에 바인딩되는 것을 볼 수 있다.

🎲 radio value 바인딩

<template>
    <label><input type="radio" v-model="picked" v-bind:value="radioVaule1" />서울</label>
    <label><input type="radio" v-model="picked" v-bind:value="radioVaule2" />부산</label>
    <label><input type="radio" v-model="picked" v-bind:value="radioVaule3" />제주</label>
    <br />
    <span>체크한 지역 : {{ picked }}</span>
</template>
<script>
export default {
  data() {
    return {
       picked: "",
       radioVaule1: "서울",
       radioVaule2: "부산",
       radioVaule3: "제주",
    };
  },
};
</script>

radio태그의 value를 바인딩 하려면, 각 radio태그에 v-bind:value="" 라고 지정을 해주고 data의 return부분에 각 value에 맞는 값들을 넣어놓으면, radio가 선택 되었을 때 해당 radio의 value값을 가져올 수 있고, v-model로는 선택이 되었는지의 진위여부를 판단할 수 있다.

🎲 이미지 바인딩

<template>
    <img v-bind:src="imgSrc" />
</template>
<script>
export default {
  data() {
    return {
       imgSrc: "https://kr.vuejs.org/images/logo.png",
    };
  },
};
</script>

이미지를 바인딩 하기 위해서는 v-bind:src를 이용해 해당 이미지의 값을 가져와서 element태그에 적용 시킬 수 있다.

🎲 실제로도 많이 사용하는 버튼 disabled -> able

// input값이 생기면 버튼이 활성화 되게 할 것이다.
<template>
     <input type="text" v-model="textValue" />
    <button type="button" v-bind:disabled="textValue === ''">Click</button>
</template>
<script>
export default {
  data() {
    return {
       textValue: "",
    };
  },
};
</script>

보기와 같이 매우 간단하다.
input의 v-model값과 button의 v-bind:disabled의 값을 동일하게 주고 disabled되는 조건을 넣어주면 끝이다.

리액트의 경우에 위에서 했던 데이터들에 대한 바인딩이나, 어떠한 조건에 의해 button의 상태가 변경되기 위해서는 onchange함수와 이외에 조건들이 어느정도 붙어있었는데

VueJs에서는 이러한 자주 사용하지만 귀찮은? 것들을 쉽게 처리해주는 면이 마음에 드는 것 같다.

🎲 클래스 바인딩

<template>
  <div
      class="container"
      v-bind:class="{
        'active': isActive,
        'text-red': hasError,
      }">
      Class Binding
   </div>
</template>
<script>
export default {
  data() {
    return {
       isActive: true,
      hasError: false,
    };
  },
};
</script>
<style scoped>
container {
  width: 100%;
  height: 200px;
}
.active {
  background-color: yellow;
  font-weight: bold;
}
.text-red {
  color: red;
}
</style>

반드시 적용되야 하는 클래스는 html에서 사용하던 방식처럼 class 속성에 클래스 명을 입력하면 되고, 조건에 따라 (on, hover ....) 바인딩할 클래스의 경우 v-bind:class로 추가적인 정의를 해서 사용이 가능하다.
해당값의 진위여부에 따라 스타일 변경이나 텍스트의 값 등등 많은 것들을 바꿔줄 수 있다.

🎲 인라인 스타일 바인딩

<template>
  <div v-bind:style="styleObject">인라인 스타일 바인딩</div>
</template>
<script>
export default {
  data() {
    return {
       styleObject: {
        color: "red",
        fontSize: "13px",
      },
    };
  },
};
</script>

v-bind:style로 스타일도 바인딩이 가능하다.

이번 글은 바인딩 관련된 문법들만 정리하고,
다음 글은 랜더링관련, on이벤트, key이벤트를 작성하려 한다.