• React

React

---

 

• 홈페이지

  • React, React (ko)

  • React Native

  • Flux

  • Babel REPL

• JSX(JavaScript XML) 사용 가능

 

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

        this.state = {                      //--- 상태 변경시 render() 호출
            seconds: 0  
        };
        
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    
    render() {
        return (
Hello {this.props.name}
);
        // return null;                        //--- 아무것도 표시하지 않음
    }
    
    componentDidMount() {                   //--- rendering 후 호출 
        //--- setState() 함수가 호출되면 render() 함수도 호출 한다.
        // this.setState({ seconds: this.state.seconds + 1 });
        this.setState(function(state, props) {
            seconds: state.seconds + 1
        });
    }
    
    componentWillUnmount() {                //--- Unmount 후 호출
        
    }
    
    handleChange(e) {
        e.target.value;
    }
    
    handleSubmit(e) {
        e.preventDefault();                 //--- 기본 동작을 방지
    }
    
    getRawMarkup() {
        return { __html: this.state.seconds };
    }
}

let domContainer = document.querySelector('#ParentId');
// let domContainer = document.getElementById('ParentId')
ReactDOM.render(
    
    

    

    //--- 배열 등에서 변경할 항목을 지정하기 위해 key를 사용
    
, 
    domContainer
);

 

Last modified, 2020.08.26 ~ 2020.08.26, version 0.01

---