Component2 smart component, dumb component 리액트에서 컴포넌트를 정의할때 es6의 class문법을 사용합니다. 컴포넌트에서 라이프사이클을 사용해야 하거나 state를 사용해야 할때는 꼭 이렇게 사용해야합니다. 이것을 Smart Component 혹은 Container라고 부릅니다. import React, { Component } from 'react'; class App extends Component { render() { return ( Hello {this.props.name} ); } } export default App; 라이프사이클을 사용할 필요가 없거나 state도 사용할 필요가 없고 단순히 렌더만 해줘야한다면 아래처럼 컴포넌트를 만들 수 있습니다. import React from 'react'; function App(props).. 2019. 12. 2. 같은 컴포넌트 레벨의 통신방법 var appHeader = { template: 'Header', props: ['propsdata'] // 4. props로 상위 컴포넌트에서 num의 값을 받아온다. } var appContent = { template: 'Contentpass', methods: { passNum: function() { this.$emit('pass', 10); // 1. pass라는 이벤트에 10을 인자로 넘김 } } } new Vue({ el: '#app', components: { 'app-header': appHeader, 'app-content': appContent }, data: { num: 0 }, methods: { deliverNum: function(val) { this.num = val; }.. 2019. 10. 30. 이전 1 다음 반응형
