---

🫐 리액트의 라이프사이클 메서드

React 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 라이프사이클은 주로 컴포넌트의 생성(Mount), 업데이트(Update), 소멸(Unmount) 단계에서 이루어진다.

---

🍒 클래스형 컴포넌트의 라이프사이클 메서드

• componentDidMount() : 컴포넌트가 마운트된 직후 호출된다. 비동기 요청이나 초기데이터를 가져오는 용도로 사용.

🖥️ javascript

componentDidMount() {
  console.log('컴포넌트가 마운트되었습니다.');
}

• componentDidUpdate(prveProps, prevState) : props 또는 state가 업데이트될 때마다 호출된다.

🖥️ javascript

componentDidUpdate(prevProps) {
	if (prevProps.value !== this.props.value) {
    	console.log('업데이트 완료!');
    }
}

• componenWillUnmount() : 컴포넌트가 언마운트되기 직전에 호출된다. 이벤트 리스너나 타이머를 해제할 때 유용.

🖥️ javascript

componentWillUnmount() {
	console.log('컴포넌트가 언마운트됩니다.');
}

---

🍒 함수형 컴포넌트의 라이프사이클 (React Hooks 사용)

• useEffect() : 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount를 대체한다.

🖥️ javascript

useEffect(() => {
	console.log('마운트 또는 업데이트 발생!');
    
    return () => {
    	console.log('컴포넌트가 언마운트됩니다.');
    }
}, []);

🏹 constructor, shouldComponentUpdate 생략

---

리액트 라이프 사이클과 useEffect 실행 순서

---