[TIL🔥] Day25(9/27)

김다슬·2021년 9월 28일

KDT TIL grepp vue.js 데브코스 양방향 데이터 바인딩 프로그래머스 프론트엔드

Today I Learned

목록 보기

21/22

Introduction

추석 연휴 이틀은 푹쉬고 남은 기간 동안은 scss공부 + 유튜브 메인 레이아웃 클론 과제를 진행했다.
그리고 이번주부터는 드디어 Vue 학습 시간!!! 처음으로 프레임워크를 배우는 것이라 기대가 된다.
열심히 배워서 프로젝트에 적용해볼 예정이다.

오늘 새롭게 배운 것

클래스와 스타일 바인딩

조건부 렌더링

리스크 렌더링

이벤트 핸들링

폼 입력 바인딩

오늘은 Vue.js의 단방향, 양방향 데이터 바인딩과 폼 입력 바인딩에 대해 정리해볼 예정이다.

💫 데이터 바인딩

두 데이터 혹은 정보의 소스를 모두 일치시키는 기법
화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법

단방향 데이터 바인딩

data 객체가 가지고 있는 정보를 v-bind 디렉티브를 사용하여 html 코드 내로 바인딩하여 화면에 렌더링하는 방식으로 값을 확인할 수 있다.
이 방식은 Vue 인스턴스 -> Template와 같이 한 방향으로 데이터에 접근하는 방식이다.

<body>
    <div id="app">
      <input type="text" :value="msg" />
      <h1>{{msg}}</h1>
    </div>
    <script>
      const App = {
        data() {
          return {
            msg: 'hello Vue!',
          };
        },
      };
      const vm = Vue.createApp(App).mount('#app');
    </script>
  </body>

위 코드와 같은 상황에서 데이터는 한방향으로만 흐르고 있기 때문에 input 태그의 값을 변경해도 화면에는 아무런 변화가 일어나지 않는다

양방향 데이터 바인딩

Vue 인스턴스 -> Template, Template -> Vue 인스턴스 양방향 모두 데이터에 접근할 수 있도록 하는 것
즉, input 태그에 값을 입력하면 변경된 값이 화면에 렌더링 되는 방식

Vue에서는 이벤트와 v-model 디렉티브를 통해 양방향 데이터 바인딩이 가능하다

이러한 양방향 데이터 바인딩을 폼 입력 바인딩에서 확인해 볼 수 있다.

폼 입력 바인딩

input, textarea, select 등 다양한 요소에서 적용이 가능하다.

1. input 이벤트 활용

<body>
    <div id="app">
      <input type="text" :value="msg" @input="msg = $event.target.value" />
      <h1>{{msg}}</h1>
    </div>
    <script>
      const App = {
        data() {
          return {
            msg: 'hello Vue!',
          };
        },
      };
      const vm = Vue.createApp(App).mount('#app');
    </script>
  </body>

위와 같이 input 이벤트를 활용해 $event.target에 직접 접근하여 msg를 변경해 줄 수 있다.

주의할 점은, 한글의 경우 v-model 디렉티브 사용 시 실시간 반영이 불가능하다. 따라서 한글 입력 시에는 input 이벤트를 활용하는 것이 좋다

2. v-model 디렉티브 활용

input 요소 적용 예제

text

<body>
    <div id="app">
      <input type="text" v-model="msg" />
      <h1>{{msg}}</h1>
    </div>
    <script>
      const App = {
        data() {
          return {
            msg: 'hello Vue!',
          };
        },
      };
      const vm = Vue.createApp(App).mount('#app');
    </script>
  </body>

radio

<body>
    <div id="app">
      <input v-model="picked" type="radio" value="daseul" />
      <input v-model="picked" type="radio" value="leon" />
      <input v-model="picked" type="radio" value="lia" />
    </div>
    <script>
      const App = {
        data() {
          return {
            picked: '',
          };
        },
        watch: {
          picked(newValue) {
            console.log(newValue);
          },
        },
      };
      const vm = Vue.createApp(App).mount('#app');
    </script>
  </body>

select 요소 적용 예제

<body>
    <div id="app">
      <select v-model="selected">
        <option value="">하나를 선택하세요!</option>
        <option v-for="fruit in fruits" :key="fruit.value" :value="fruit.value">
          {{fruit.text}}
        </option>
      </select>
    </div>
    <script>
      const App = {
        data() {
          return {
            selected: '',
            fruits: [
              { text: '사과', value: 'apple' },
              { text: '바나나', value: 'banana' },
              { text: '체리', value: 'cherry' },
            ],
          };
        },
        watch: {
          selected(newValue) {
            console.log(newValue);
          },
        },
      };
      const vm = Vue.createApp(App).mount('#app');
    </script>
  </body>