React STEP 20 - Create React App - 2

⭐ 생명주기 함수 이해하기

• 컴포넌트의 정보를 보여주는 도구를 설치 -> 크롬 브라우저에서 해당 URL 접속
• https://chrome.google.com/webstore

Chrome Web Store

• React Developer Tool 검색 및 [Chrome에 추가] 버튼을 눌러 확장 프로그램을 설치
• React 개발상에서의 컴포넌트를 보고 싶을 때, [Components]라는 탭이 앞에서 설치한 확장 프로그램에 의해 개발자 도구에 추가되어 있습니다.
• 실제 태그를 보고 싶을 때는 [Elements] 탭을 쓰면 되지만, React 코드를 분석할 때는 [Components] 탭을 쓰면 컴포넌트들을 볼 수 있습니다

 

1. 단계 1 

• src/App.js

import React, { Component } from 'react';
 import Lifecycle from './Lifecycle';
 import './App.css';
 class App extends Component {
    render(){
        return (
            <div className="container">
                <h1>React Example</h1>
                <Lifecycle propValue="fromApp" />
            </div>
        );
    }
 }
 export default App;

• src/Lifecycle.js

 import React, { Component } from 'react';
 class Lifecycle extends Component {
    constructor(props){
        super(props);
        this.state={};
        console.log("1. constructor()");
        console.log(props);
    }
    static getDerivedStateFromProps(props, state){
        console.log("2. getDerivedStateFromProps(), "+props.propValue);
        console.log(props);
        console.log(state);
        return {};
    }
    render(){
        console.log("3. render()");
 1-1) 단계1
 src/App.js
 src/Lifecycle.js
        return (
            <h2>This is Render Function.</h2>
        );
    }
 }
 export default Lifecycle;

 

2. 단계 2

• src/Lifecycle.js

import React, { Component } from 'react';
 class Lifecycle extends Component {
    constructor(props){
        super(props);
        this.state={};
        console.log("1. constructor()");
        console.log(props);
    }
    static getDerivedStateFromProps(props, state){
        console.log("2. getDerivedStateFromProps(), "+props.propValue);
        return {tempState: props.propValue};
    }
    componentDidMount(){
        console.log("4. componentDidMount()");
        console.log("5. tempState : "+this.state.tempState);
        console.log(this.state);
    }
    render(){
        console.log("3. render()");
        return (
            <h2>This is Render Function.</h2>
        );
    }
 }
 1-2) 단계2
 src/Lifecycle.js
export default Lifecycle;

 

3. 단계 3

• src/Lifecycle.js

import React, { Component } from 'react';
 class Lifecycle extends Component {
    constructor(props){
        super(props);
        this.state={};
        console.log("1. constructor()");
        console.log(props);
    }
    static getDerivedStateFromProps(props, state){
        console.log("2. getDerivedStateFromProps(). "+props.propValue);
        return {tempState1: props.propValue};
    }
    componentDidMount(){
        console.log("4. componentDidMount()");
        console.log("5. tempState1 : "+this.state.tempState1);
        this.setState({tempState2: true});
    }
    shouldComponentUpdate(props, state){
        console.log("6. shouldComponentUpdate(), tempState2 : "+state.tempState2);
        return state.tempState2;
        // return false;
    }
    render(){
        console.log("3. render()");
        return (
            <h2>This is Render Function.</h2>
        );
    }
 }
 
 export default Lifecycle;