[React] 클래스 컴포넌트사용

import React, { Component, useEffect, useState } from 'react';

const App4 = (props) => {
    //클래스 컴포넌트 보이기
    const [funcShow, setFuncShow] = useState(true);
    return (
        <div>
            <h1>hello World</h1>
            <input type="button" value="클래스 컴포넌트 보이기/안보이기" onClick={()=>{setFuncShow(!funcShow)}}/>
            {funcShow && <ClassComp initNumber={2}/>}
        </div>
    );
};
// 클래스 컴포넌트 만들기
class ClassComp extends Component{
    //state 생성
    //props 값을 state값으로 지정
    state = {
        number : this.props.initNumber,
        date : new Date().toLocaleTimeString(),
    }
    //랜더가 끝난 다음 실행사이클 메서드
    componentDidMount() {
        console.log('class형 컴포넌트 => conponentDidMount')
    }
    //컴포넌트 unMount되기 직전 실행 사이클 매서드
    componentWillUnmount() {
        console.log('class형 컴포넌트 => componentWillUnmount')
    }
    render(){
        console.log('class형 컴포넌트 => render')
        return(
            <div className='container'>
                <h2>클래스 컴포넌트</h2>
                <p>Number : <span>{this.state.number}</span></p>
                <p>Date : <span>{this.state.date}</span></p>
            </div>
        )
    }
}

export default App4;

보이기 안보이기를 반복할 수 있다.

처음 시작시 값이 보이게 되며 render가 자동으로 실행 된 후

componentDidMount 가 실행된다. (rander종료 후 실행된다)

 

보이지 않기를 선택시 클래스컴포넌트가 모두 사라지며

componentWillummount  가 실행된다.(화면에 있는 요소들이 사라지면 실행된다.)