📒 TODO ! - 형태 알아가기

👏 TODO 예제 시작 !

 이번 포스팅부터는 아래의 간단한 TODO의 코드를보며 Vue에 대해 알아가볼 예정입니다. #간단주의

해당 예제는
Vue : https://github.com/baegofda/blog-vue
React: https://github.com/baegofda/blog-react 
위의 주소에서 데모와 함께 소스코드 확인이 가능합니다 !

👀 특징

 먼저 React와 Vue 코드의 차이점들을 간단하게 코드의 형태로 알아보겠습니다.

React의 통상적인 형태는 아래와 같습니다.

import React, { useRef, useState } from "react";
import styled from "styled-components";
import Button from "../components/Button";
import ToDoItem from "../components/ToDoItem";

const ToDos = () => {
  // JS Code, React Hooks, etc..

  return (
    // JSX 문법
  );
};

const Wrapper = styled.main`
  padding-top: 150px;
`;
const Title = styled.h1`
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
`;
const InputContainer = styled.form`
  display: flex;
  width: 400px;
  height: 40px;
  margin-bottom: 20px;
`;
const Input = styled.input`
  margin-right: 5px;
  background-color: transparent;
  border: 0;
  outline: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  flex: 1;
`;

export default ToDos;

 React는 상단에 사용할 컴포넌트, 파일, Hooks 등을 import를 합니다.

import React, { useRef, useState } from "react";
import styled from "styled-components";
import Button from "../components/Button";
import ToDoItem from "../components/ToDoItem";

 아래엔 component에대한 코드를 작성하며 state, js, Hooks 등을 작성하고 return 이후 JSX문법을 이용하여 UI 코드를 작성합니다.

const ToDos = () => {
  // state, JS Code, React Hooks, function, etc..

  return (
    // JSX 문법
  );
};

 스타일링을 위한 css는 외부에서 import를 하거나 styled-components, emotion 사용 시 component 코드 전후로 작성을 합니다. 

const Wrapper = styled.main`
  padding-top: 150px;
`;
const Title = styled.h1`
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
`;
const InputContainer = styled.form`
  display: flex;
  width: 400px;
  height: 40px;
  margin-bottom: 20px;
`;
const Input = styled.input`
  margin-right: 5px;
  background-color: transparent;
  border: 0;
  outline: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  flex: 1;
`;

 이번엔 Vue의 코드입니다.

<template>
  <main class="wrapper">
    <h1 class="title">TODO</h1>
    <form class="form">
      <input
        ref="todoInput"
        type="text"
        class="form__input"
        placeholder="추가할 리스트를 입력하여 주세요 !"
        v-model="inputText"
      />
      <Button type="submit" name="추가하기" @click="onClick" />
    </form>
    <ul>
      <ToDoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @onComplete="onComplete($event)"
        @onDelete="onDelete($event)"
      />
    </ul>
  </main>
</template>
<script>
import Button from "../components/Button.vue";
import ToDoItem from "../components/ToDoItem.vue";

export default {
  name: "Todos",
  components: {
    // import 된 component 등록
  },
  data() {
    return {
      // state
    };
  },
  methods: {
    // function
  },
};
</script>

<style scoped>
.wrapper {
  padding-top: 150px;
}
.title {
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
.form {
  display: flex;
  width: 400px;
  height: 40px;
  margin-bottom: 20px;
}
.form__input {
  margin-right: 5px;
  background-color: transparent;
  border: 0;
  outline: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  flex: 1;
}
</style>

 React와 달리 상단에 template가 먼저 등장하며 html과 Vue 문법을 이용한 UI 코드를 작성합니다.

<template>
  <!-- Vue template 문법 -->
  <main class="wrapper">
    <h1 class="title">TODO</h1>
    <form class="form">
      <input
        ref="todoInput"
        type="text"
        class="form__input"
        placeholder="추가할 리스트를 입력하여 주세요 !"
        v-model="inputText"
      />
      <Button type="submit" name="추가하기" @click="onClick" />
    </form>
    <ul>
      <ToDoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @onComplete="onComplete($event)"
        @onDelete="onDelete($event)"
      />
    </ul>
  </main>
</template>

 이후 script태그가 등장하며 내부에 사용할 component의 import, state, function 등을 작성합니다.

<script>
import Button from "../components/Button.vue";
import ToDoItem from "../components/ToDoItem.vue";

export default {
  name: "Todos",
  components: {
    // import 된 component 등록
  },
  data() {
    return {
      // state
    };
  },
  methods: {
    // function
  },
};
</script>

 마지막으로 css에 관한 style태그가 있으며 마찬가지로 외부에서 import 해서 사용할 수 있지만 내부에서 작성을 합니다.

<style scoped>
.wrapper {
  padding-top: 150px;
}
.title {
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
.form {
  display: flex;
  width: 400px;
  height: 40px;
  margin-bottom: 20px;
}
.form__input {
  margin-right: 5px;
  background-color: transparent;
  border: 0;
  outline: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  flex: 1;
}
</style>

 이렇게 비슷한 듯 다른 구조를 가지고 있습니다.

* 코드 구조의 형태는 프로젝트마다 다를 수 있으나 통상적으로 사용되는 형태로 비교하였습니다.

 

2021.12.23 - [Vue] - 📝 TODO ! - 컴포넌트 import, state 선언