lifecycle

김하은·2023년 2월 2일
0
post-custom-banner

useEffect의 실행시점 => 랜더후(화면에 그리기 이후)

useEffect는 use로 시작하니 hook중의 하나이다.

함수형 컴포넌트의 생명주기시에는 useEffect를 사용한다.

그럼 생명주기는 무엇일까?

컴포넌트의 생명주기 :

컴포넌트가 브라우저에 나타나고,

업데이트되고,

사라지게될때

실행되는 메서드이다.

=> 특정시점에 코드가 실행되도록 할 수 있다는 말!!

class 컴포넌트에서는 render(){// 여기에 HTML부분}
이 랜더함수안에 html을 넣어주는데, 먼저 화면에 render부분이 그려진다.
그리고 난뒤에는 componentDidMount()가 실행되는데, 화면에 커서가 깜빡거리게 하고 싶을때는 여기서 처리하게된다.
그리고 state등이 변경이 되거나 할때 componentDidUpdate() 가 실행되고, 컴포넌트가 사라질때 -> componentWillUnMount()가 실행된다.

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

물론, 함수형에도 라이프사이클이 존재한다.
그러면 같은것을 함수형 컴포넌트에서 사용할 수 있을까?
이것은 따로 블로깅을해놓겠다. 그럼 다음블로그에서...

post-custom-banner

0개의 댓글