State Lifecycle

class 컴포넌트의 생명주기 (Life Cycle)

• 컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드 이다.
• 쉽게 말해, 특정 시점에 코드가 실행되도록 설정할 수 있다는 것.
• 메서드에 대해 간략히 요약 한다면,

1. 그리기 -> render 인풋창 그리기.
2. 그리고 난 뒤 -> componentDidMount 포커스 깜빡거리기.
3. 그리고 난 뒤 변경 -> componentDidUpdate
4. 그리고 난 뒤 사라짐 -> componentWillUnmount

ex)

// class 컴포넌트의 생명주기
import {Component} from 'react'
import Router from 'react'


export default class ClassCounterPage  extends Component{
		state = {
					count : 0,
				}


//라이프사이클 메서드
componentDidMout(){
		console.log("마운트 됨")
		//input태그 선택해서 포커스 깜빡거리게 하기
	}
componentDidUpdate(){
		console.log("수정하고 다시 그림!!")
	}
componentWillUnmount(){
		console.log("여기서 나갈래요")
		//나가기 전에 마지막으로 할 것들
	}


// 카운트 올리기 함수
onClickCouter = ()=>{
		console.log(this.state.conut)
		this.setState(((prev))=>({
		count : this.state.count(=prev.count) +1
			}))
	}

// 현재 페이지 나가기 함수 _ componentWillUnmount를 보기위한
onClickMove = () => {
		router.push('/')
	}
// 화면 그리는 부분
render(){
	return(
		<div> 
			// this는 class 자기자신을 뜻합니다.
				<div>현재 카운트 : {this.state.count}</div>
	
			// 직접 바인딩 하실때는 onClick={this.onClickCouter.bind(this)} 라고 적어주셔야 합니다.
				<button onClick={this.onClickCouter}>카운트 올리기</button>
				<button onClick={this.onClickMove}>나가기</button>
		</div>
		)
	}
}