개발 일기

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 기능 및 라이프사이클 기능을 사..

Vue에는 변화를 감지하는 프로퍼티인 computed와 watch가 있다. 비슷한 성격탓에 공식 문서에도 함께 다루는 것을 볼 수 있다. 충분히 헷갈릴 수 있지만 목적을 보면서 사용한다면 상황에 맞게 잘 쓸 수 있다. kr.vuejs.org/v2/guide/computed.html computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Computed 특정 data가 변화되었을 때, 복잡한 계산식을 계산하여 값을 return 해주는 속성이다. {{ doubleCount }} 클릭하면 두배 위의 예제에서는 버튼을 클릭하면 count가 +1이 되는데 이의 변화를 감지하는 computed에서 count의 두배를 계산해주고 있다. 상태 변화 값에 ..

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