📝 TODO ! - 컴포넌트 import, state 선언

👏 컴포넌트 사용하기 !

 먼저 import와 state선언을 알아보겠습니다.

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

1. import

 먼저 전체 컨테이너가 될 Todos라는 페이지 컴포넌트를 임포트하는 방법입니다. 

React

 React 프로젝트의 App.js에 import는 아래와 같이 파일 상단에 import를 합니다.

// App.js
import Todos from "./pages/Todos";

function App() {
  return <Todos />;
}

export default App;

Vue

 Vue 프로젝트의 App.vue에 import를 합니다.

Vue에서는 컴포넌트를 import 할시 script 태그내에 import를 한 후 export default {}; 의 내부에 components라는 속성에 등록을 해주어야 합니다.

<!--App.vue-->
<template>
  <Todos />
</template>

<script>
import Todos from "./pages/Todos.vue";

export default {
  name: "App",
  components: {
    Todos,
  },
};
</script>

2. state

 컴포넌트에서 사용할 state의 선언에대해서 알아보겠습니다.

React

 React에서의 state는 컴포넌트 선언부 아래에 useRef(), useSate()를 이용하여 state를 선언하고 관리합니다.

// ToDos.jsx
const ToDos = () => {
  const inputRef = useRef();
  const [inputText, setInputText] = useState("");
  const [items, setItems] = useState([]);

   // function

  return (
   // UI
  );
};

Vue

 Vue는 script 태그 export default {}; 의 내부에 data()에서 관리를 합니다.

Vue에서는 컴포넌트를 import 할시 script 태그내에 import를 한 후 export default {}; 의 내부에 components라는 속성에 등록을 해주어야 합니다.

<template>
  <!--UI-->
</template>
<script>
import Button from "../components/Button.vue";
import ToDoItem from "../components/ToDoItem.vue";

export default {
  name: "Todos",
  data() {
    return {
      inputText: "",
      todos: [],
    };
  },
  methods: {
    // function
  },
  components: {
    // component
  },
};
</script>

<style scoped>
// css
</style>

2021.12.27 - [Vue] - 🖼️ TODO ! - 컴포넌트 분리하기 (feat. component, props)