리액트의 생명 주기 메서드와 메서드 종류
REACT
해당 포스팅에서는 REACT의 생명 주기 메서드와 메서드 종류에 대해 다룹니다.
이번 포스팅 목차
- REACT의 생명 주기 메서드와 메서드 종류
리액트의 생명 주기 메서드와 메서드 종류
생명 주기 메서드와 메서드 종류 는 클래스형 컴포넌트에서 컴포넌트가 생성되고, 업데이트되며, 소멸되는 과정을 제어하기 위해 사용됩니다. 생명주기 메서드는 크게 마운팅(Mounting), 업데이트(Updating), 언마운팅(Unmounting), 에러 처리(Error Handling) 단계로 나눌 수 있습니다.
클래스형 컴포넌트의 생명주기 메서드 종류와 역활
마운팅(Mounting): 컴포넌트가 처음 DOM에 삽입될 때 발생합니다.
업데이트(Updating): 컴포넌트의 상태나 props가 변경될 때 발생합니다.
언마운팅(Unmounting): 컴포넌트가 DOM에서 제거될 때 발생합니다.
에러 처리(Error Handling): 컴포넌트에서 에러가 발생할 때 호출됩니다.
1. 마운팅(Mounting)의 생명주기 함수
마운팅(Mounting)
마운팅 단계는 컴포넌트가 처음 DOM에 삽입될 때 발생합니다. 이 과정에서 호출되는 메서드는 다음과 같습니다
constructor(props)
컴포넌트가 생성될 때 호출되며 상태(state) 초기화 및 클래스 메서드 바인딩을 수행 합니다.
1
2
3
4
5
6
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
}
static getDerivedStateFromProps(nextProps, prevState)
컴포넌트가 생성되거나 업데이트될 때 호출하며 새로운 props를 기반으로 상태를 업데이트 할 수 있습니다. 정적 메서드 이며, 인스턴스 메서드가 아닙니다.
1
2
3
4
5
6
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.value !== prevState.value) {
return { value: nextProps.value };
}
return null;
}
render()
필수 메서드로, 컴포넌트의 UI을 정의 합니다. 순수 함수로, 상태나 props를 변경하지 않고 렌더링만 수행 합니다.
1
2
3
render() {
return <div>{this.state.count}</div>;
}
componentDidMount()
컴포넌트가 처음 렌더링된 후 호출 됩니다. AJAX 요청, 타이머 설정 등의 작업을 수행 할 수 있습니다.
1
2
3
componentDidMount() {
console.log('Component has mounted');
}
2. 업데이트(Updating)의 생명주기 함수
업데이트(Updating)
업데이트 단계는 컴포넌트의 상태나 props가 변경될 때 발생합ㄴ디ㅏ. 이 과정에서 호출되는 메서드는 다음과 같습니다.
static getDerivedStateFromProps(nextProps, prevState)
마운팅 단계와 동일하게, 새로운 props를 기반으로 상태를 업데이트 할 수 있습니다.
shouldComponentUpdate(nextProps, nextState)
컨포넌트가 리렌더링될지 여부를 결정 하며, 성능 최적화를 위해 사용됩니다. 기본적으로는 true를 반환합니다.
1
2
3
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;
}
render()
상태나 props가 변경될 때마다 호출되어 Ul을 다시 렌더링합니다.
getSnapshotBeforeUpdate(prevProps, prevState)
컴포넌트의 변경된 내용이 DOM에 반영되기 직전에 호출 되며, 스크롤 위치 등의 정보를 캡처 할 수 있습니다.
1
2
3
4
5
6
getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevProps.list.length < this.props.list.length) {
return this.listEnd.scrollHeight;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot)
컴포넌트의 업데이트가 완료된 후 호출 되며, 이전 상태와 새로운 상태를 비교하여 DOM 조작 등의 작업을 수행 할 수 있습니다.
1
2
3
4
5
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot !== null) {
this.listEnd.scrollTop = this.listEnd.scrollHeight - snapshot;
}
}
3. 언마운팅(Unmounting)의 생명주기 함수
언마운팅(Unmounting)
언마운팅 단계는 컴포넌트가 DOM에서 제거될 떄 발생합니다. 이 과정에서 호출되는 메서드는 다음과 같습니다.
componentWillUnmount()
컴포넌트가 DOM에서 제거되기 전에 호출 되며, 타이머 정리, 구독 해제 등의 작업을 수행할 수 있습니다.
1
2
3
componentWillUnmount() {
console.log('Component will unmount');
}
4. 에러 처리(Error Handling)의 생명주기 함수
에러 처리(Error Handling)
에러 처리 단계는 컴포넌트에서 에러가 발생할떄 호출 되며, 이 과정에서 호출되는 메서드는 다음과 같습니다.
static getDerivedStateFromError(error)
컴포넌트에서 에러가 발생하면 호출 되며, 에러 상태를 업데이트 할 수 있습니다.
1
2
3
componentWillUnmount() {
console.log('Component will unmount');
}
componentDidCatch(error, info)
컴포넌트에서 에러가 발생하면 호출 되며, 로그 기록등의 작업을 수행 할 수 있습니다.
1
2
3
4
componentDidCatch(error, info) {
console.log('Error:', error);
console.log('Info:', info);
}
마무리
클래스형 컴포넌트의 생명주기 메서드 는 컴포넌트의 생성, 업데이트, 소멸, 에러 처리 과정에서 호출되는 특정 메서드 들로, 각 메서드는 컴포넌트의 특정 상태에서 특정 작업을 수행 할 수 있게 합니다. 함수형 컴포넌트에서는 이러한 생명주기 작업을 훅(Hooks) 을 통해 처리할 수 있습니다. 마무리로 생명주기 메서드를 요약해보겠습니다.
constructor(props): 상태 초기화 및 클래스 메서드 바인딩
static getDerivedStateFromProps(nextProps, prevState): props 변경 시 상태 업데이트
render(): UI 정의
componentDidMount(): 컴포넌트가 마운트된 후 실행
shouldComponentUpdate(nextProps, nextState): 컴포넌트가 리렌더링될지 여부 결정
getSnapshotBeforeUpdate(prevProps, prevState): DOM 업데이트 직전에 호출
componentDidUpdate(prevProps, prevState, snapshot): 컴포넌트가 업데이트된 후 실행
componentWillUnmount(): 컴포넌트가 언마운트되기 전에 실행
static getDerivedStateFromError(error): 에러 발생 시 상태 업데이트
componentDidCatch(error, info): 에러 발생 시 호출
오늘도 제 블로그에 방문해주셔서 감사합니다!