기타
클래스 컴포넌트의 생명주기
js0616
2024. 7. 29. 07:24
https://www.youtube.com/watch?v=pjakE0D4CeI
클래스 컴포넌트 예시
import React, { Component } from 'react';
// 예시로 사용할 클래스 컴포넌트 정의
class Counter extends Component {
constructor(props) {
super(props);
// 초기 상태 설정
this.state = {
count: 0
};
}
// 증가 메서드
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
}
// 감소 메서드
decrementCount = () => {
this.setState({ count: this.state.count - 1 });
}
render() {
return (
<div>
<h2>카운터</h2>
<p>현재 값: {this.state.count}</p>
<button onClick={this.incrementCount}>증가</button>
<button onClick={this.decrementCount}>감소</button>
</div>
);
}
}
export default Counter;
- 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비과정에서 시작하여, 브라우저에 렌더링 및 업데이트 후 페이지에서 사라질 때 끝난다.
- 컴포넌트는 생성 업데이트 제거의 생명주기를 가집니다.
- 클래스 컴포넌트는 라이플 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다.
마운트(Mount) 단계
1. constructor()
- 컴포넌트가 생성될 때 호출되는 첫 번째 메서드입니다.
- 초기 상태 설정이나 메서드 바인딩 등을 주로 수행합니다.
2. render()
- 컴포넌트의 UI를 렌더링하는 메서드입니다.
- 반드시 JSX를 반환해야 하며, 이후 생명 주기 메서드들이 호출됩니다.
3. componentDidMount()
- 컴포넌트가 화면에 마운트된 직후에 호출되는 메서드입니다.
- DOM 조작이나 외부 데이터 요청 등의 비동기 작업을 수행하기에 적합합니다.
업데이트(Update) 단계
1. render()
마운트 단계와 동일합니다
변경된 상태나 프롭스에 따라 UI를 업데이트합니다.
2. componentDidUpdate(prevProps, prevState, snapshot)
컴포넌트의 업데이트가 완료된 직후에 호출되는 메서드입니다.
이전 props나 state에 접근하여 업데이트 이후의 작업을 처리할 수 있습니다.
언마운트(Unmount) 단계
componentWillUnmount()
컴포넌트가 제거되기 직전에 호출되는 메서드입니다.
이벤트 리스너의 해제나 타이머의 중지 등의 정리 작업을 수행합니다.
https://rnfltpgus.github.io/react/life-cycle/
https://ko.legacy.reactjs.org/docs/react-component.html