REACT_render()

 

 

 

- R004_LifeCycleEx.js

import React, {Component} from 'react';

class R004_LifeCycleEx extends Component {
    render() {
        console.log('3. render Call');
        return(<h2>THIS IS RENDER FUNCTION</h2>)
    }
 }

 export default R004_LifeCycleEx;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import LifeCycleEx from './R004_LifeCycleEx.js';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <LifeCycleEx prop_value = 'FromApp.js'/>
    </div>
  );
}

export default App;

 

결과

---

- R005_LifeCycleEx.js

import React, {Component} from 'react';

class R005_LifeCycleEx extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        console.log('1. constructor Call');
    }
    render(){
        console.log('3. render Call');
        return(<h2>[THIS IS CONSTRUCTOR FUNCTION_05]</h2>)
    }
}
export default R005_LifeCycleEx;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import LifeCycleEx from './R005_LifeCycleEx.js';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <LifeCycleEx prop_value = 'FromApp.js'/>
    </div>
  );
}

export default App;

 

결과