[vue] 구구단 만들기

인프런 "웹 게임을 만들며 배우는 vue" 강의를 보며 작성하는 내용입니다.
https://www.inflearn.com/course/web-game-vue

---

간단한 구구단 게임을 할 수 있는 UI를 만들면서 Vue에서 데이터 사용법과 ref를 알아보았다.

구구단 만들기

단순히 값을 입력하면 두 수의 곱 연산결과를 반환하는 페이지를 만들자

    <script>
      const app = new Vue({
        el: '#root',
        data: {},
        methods: {},
      });
    </script>

위 부분을 작성해야한다.

여기서 data 는 뭘까?

뷰에서 바뀌는 부분은 모드 데이터로 만들자고 생각하자 (변수를 데이터?)

<script>
      const app = new Vue({
        el: '#root',
        data: {
          first: '',
          second: '',
          value: '',
          result: '',
        },
        methods: {},
      });
    </script>

4개의 데이터를 빈 값으로 초기화 했다.

그럼 이 데이터들은 어떻게 사용할 수 있을까?

1. HTML Text에서 사용

   {{ first }} 중괄호 두개를 사용하면 사용할수 있다.

2. 조건절에서 사용

   v-if 와 같이 사용한다면 → v-if="first" ” ” 따옴표 내부에 넣어 사용가능

<div id="root">
  <div>{{first}} 곱하기 는?</div>
  <form>
    <input type="number" />
    <button>입력</button>
  </form>
  <div id="result"></div>
</div>

first 데이터가 빈 값이 아니라면 곱하기 는? 앞에 값을 출력할 것이다.

💡

리액트에서 State가 Vue 에서는 data와 같다.

input 태그에서 받는 값을 Data에 반영하고 싶다.

<form>
  <input type="number"/>
  <button>입력</button>
</form>

form 내부에 input 태그를 통해 값을 입력 받고있다.

이렇게 입력 받은 값을 어떻게 나의 Data에 선언한 변수들에 적용시켜보자

v-model 사용하기

<form>
  <input type="number" v-model="value" />
  <button>입력</button>
</form>

<div>{{value}}</div>

v-model을 사용하면 input 태그에 입력되는 값이 변경될 때마다

아래 div 박스에 동일한 값이 그려진다. (양방향 바인딩)

ref와 구구단 완성하기

form 태그에 submit 이벤트 추가하기

<form v-on:submit="onSubmitForm">
  <input type="number" v-model="value" />
  <button>입력</button>
</form>
  
<script>
  const app = new Vue({
    el: '#root',
    data: {
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
      result: '',
    },
    methods: {
      onSubmitForm(e) {
        e.preventDefault();
      },
    },
  });
</script>

🚨  `e.preventDefault()` 를 통해 submit 이벤트가 발생할 때 페이지가 새로고침 되지 않도록 방지한다. 

새로고침 되는 경우 숫자가 랜덤으로 재생성되기 때문에 원하는 동작이 불가능

Focus 적용하기

구구단 문제의 답을 입력하고 자동으로 input 박스에 focus가 잡힌다면 사용자가 편리하게 사용할 수 있을 것이다.

ref를 사용하자

입력 창에 foucs를 잡히게 하고 싶기 때문에 아래와 같이 적용하자

<input type="number ref="answer" v-model="value">

이렇게 answer라는 값을 ref에 지정하면 vue는 input 태크를 answer 로 지정해서 사용가능하다.

🚨 ref를 이용해서 포커싱까지는 좋지만 값을 넣어주지말자 화면에 출력되는 값과 실제 데이터랑 오차 발생할 수 있다.