라이프사이클 (Lifecycle)


컴포넌트 생명 주기

컴포넌트 생명 주기 (Component Lifecycle)

: 생성(mounting) → 업데이트(updating) → 제거(unmounting)



mount

: 컴포넌트가 생성될 때 


componentDidMount()
useEffect(() => {
	// 컴포넌트가 화면에 가장 처음 렌더링됐을 때에만 실행하고 싶을 때
},[]);



update

: 컴포넌트가 업데이트 될 때

  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 리렌더링될 때
  • forceUpdate로 강제로 렌더링 트리거할 때

componentDidUpdate(prevProps, prevState, snapshot)
useEffect(() => {
	// 특정 값이 업데이트될 때마다 실행하고 싶을 때
},[email, password]); // 이 배열을 useEffect의 dependency array라고 부름



unmount

: 컴포넌트가 사라질 때 


componentWillUnmount()
useEffect(() => {
	return () => {
		// 컴포넌트가 사라지기 직전에 특정 코드를 실행하고 싶을 때
	};
},[]);