모든 컴포넌트에는 생명주기가 있다는 사실을 알게되었다.
클래스형 컴포넌트와 함수형 컴포넌트는 방식이 다르니 한번 알아보자

컴포넌트의 생명주기

컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트되고, 사라지게 될 때 호출되는 메서드이다.

1. 클래스형 컴포넌트

componentDidMount() {
	console.log("마운트 됨")
}

componentDidUpdate() {
	console.log("수정하고 다시 그림!!")
}

componentWillUnmount() {
	console.log("여기서 나감")
}

• 페이지가 그려진 후 componentDidMount를 통해 확인 가능
• 페이지가 업데이트되면 componentDidUpdate를 통해 확인 가능
• 페이지가 이동(삭제)되면 componentWillUnmount를 통해 확인 가능

2. 함수형 컴포넌트

함수형 컴포넌트에는 useEffect를 사용해서 생명주기관련 훅을 표현할수있다

// componentDidMount
useEffect(() => {

}, [])

// componentDidUpdate와 비슷
useEffect(() => {

})

// sum이 수정될때면 리렌더 해주기
useEffect(() => {

}, [sum])

// componentWillUnmount
useEffect(() => {
	return (() => {
    
    })
})

!! useEffect 내에서 setState를 사용하게 되면 불필요한 리렌더나 무한루프를 일으키고 성능적으로 비효율적이게 된다.. 정말 필요한 경우가 아니라면 피하자