props, state - MoonGyeongHyeon/React_Study GitHub Wiki

 return  (
            <h1> Hello Velopert</h1>
            <h2> Welcome </h2>
        );

  return  (
            <div>
                <h1> Hello Velopert </h1>
                <h2> Welcome </h2>
            </div>
        );

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

const rootElement = document.getElementById('root');
ReactDOM.render(<App headerTitle="Welcome!" 
                     contentTitle="Stranger"
                     contentBody="Welcome to example app"/>, rootElement);

import React from 'react';
import Header from './Header';
import Content from './Content';

class App extends React.Component {
    render(){
        return  (
            <div>
                <Header title={this.props.headerTitle}/>
                <Content title={this.props.contentTitle} content={this.props.contentBody}/>
            </div>
        );
    }
}

export default App;

import React from 'react';

class Header extends React.Component {
    render(){
        return (
            <h1>{this.props.title}</h1>
        );
    }
}

export default Header;

import React from 'react';

class Content extends React.Component {
    render(){
        return (
            <div>
                <h2>{this.props.title}</h2>
                <p>{this.props.content}</p>
            </div>
        );
    }
}

export default Content;

import React from 'react';
import Header from './Header';
import Content from './Content';

class App extends React.Component {
    render(){
        return  (
            <div>
                <Header title={this.props.headerTitle}/>
                <Content title={this.props.contentTitle} content={this.props.contentBody}/>
            </div>
        );
    }
}

/*
 * 아래와 같이 추가
 */
App.defaultProps = {
    headerTitle: 'Default header',
    contentTitle: 'Default contentTitle',
    contentBody: 'Default contentBody'
};

export default App;

import React from 'react';
import StateExample from "./StateExample";

class App extends React.Component {
    render() {
        return (
            <div>
                <StateExample/>
            </div>
        );
    }
}

export default App;

import React from 'react';

class StateExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            header: "Header Initial state",
            content: "Content Initial State"
        };
    }

    updateHeader(text){
        this.setState({
            header: "Header has changed"
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.header}</h1>
                <h2>{this.state.content}</h2>
                <button onClick={this.updateHeader.bind(this)}>Update</button>
            </div>
        );
    }
}

export default StateExample;