개발 일기

react의 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 두가지로 나눌 수 있다. import React from 'react' import './App.css' function App() { const framework = "리액트"; return {framework}; } export default App; 함수형 import React, { Component } from "react"; class App extends Component { render() { const framework = "리액트"; return {framework}; } } export default App; 클래스형 함수형 컴포넌트와 클래스형 컴포넌트의 차이점은 클래스형 컴포넌트에서 state 기능 및 라이프사이클 기능을 사..

컴포넌트로 화면을 구성하게 되면 같은 웹페이지라도 데이터를 공유할 수 없다. 이는 컴포넌트마다 고유한 유효 범위를 갖지 때문이다. 그렇다면 데이터 전달을 하려면 어떻게 해야할까? 상위-하위 컴포넌트 간의 데이터 전달 방법 우선 상위 - 하위 컴포넌트 간의 데이터 전달 방법이다. 상위 -> 하위 로는 props라는 특별한 속성을 전달하고, 하위 -> 상위 로는 기본적으로 이벤트만 전달 가능하다. 상위-하위 컴포넌트 간의 데이터 전달 방법에 대해 설명하기 위해 ParentComponent에 ChildComponent를 등록한 모습이다. Root Instance (main.js) └─ 최상위 컴포넌트 (App.vue) └─ ParentComponent └─ ChildComponent => 현재 컴포넌트 트리 ..

저번글 (2020/12/20 - [Vue] - Vue.js 시작하기 - Vue.js 설치)에서 Vue.js 프로젝트를 하기위해 설치를 하였지만 Vue.js 코딩을 시작하기 위해서 알아야 할 기본적인 것들에 대해 설명을 해보려한다. Instance 모든 Vue 애플리케이션의 필수, Vue 생성자로 인스턴스를 만드는 것부터 시작한다. 인스턴스를 생성할 때는 옵션 객체들을 전달해야하고 이는 사용자가 원하는 동작에 따라 다르다. new Vue({ //옵션들 }) Vue 앱은 new Vue를 통해 만들어진 Root Instance로 구성되고, 중첩이 가능하고 재사용이 가능한 컴포넌트 트리로 구성된다. 우리 프로젝트에 빗대어 표현하자면 이런 모양이 나오겠다. Root Instance (main.js) └─ 최상위 ..