생명은 시간의 흐름에 따라 시시각각 변화(태어남 -> 성장(변화) -> 죽음)한다.
마찬가지로 컴포넌트도 이러한 생명주기에 따라 다양한 라이프사이클 메서드가 제공된다.
컴포넌트의 라이프 사이클을 크게 나누면 다음의 3단계로 진행됨
컴포넌트 인스턴스를 만들고 DOM에 삽입할 때 다음 순으로 메소드 실행됨
class LifeCycle extends Component {
// 1. 컴포넌트 생성 시점에 호출
constructor(props) {
super(props)
}
// 2. 전달된 상태 및 속성을 가져와 설정하는 시점에 호출 (잘 사용되지 않음)
static getDerivedStateFromProps(props, state) {
// 컴포넌트의 상태에 업데이트 {}
return null
}
// 3. 컴포넌트 렌더링 시점에 호출
render() {
return <div />
}
// 4. DOM에 마운트 된 이후 시점에 호출
componentDidMount() {}
}
props
또는 state
가 변경될 경우 발생 => re-rendering
class LifeCycle extends Component {
// 1. 전달된 상태 및 속성을 가져와 설정하는 시점에 호출 (업뎃)
static getDerivedStateFromProps(props, state) {
return null
}
// 2. 컴포넌트 업데이트 예정 시점에 호출 (업뎃하거나, 안하거나) => 성능 최적화 용도
shouldComponentUpdate(nextProps, nextState) {
return true // flase를 반환할경우 렌더링 취소
}
// 3. 컴포넌트 렌더링 (업데이트)
render() {
return <div />
}
// 4. 컴포넌트 업데이트 전 스냅샷 가져오는 시점에 호출 (커밋전)
getSnapshotBeforeUpdate(nextProps, nextState) {}
// 5. 컴포넌트 업데이트 이후 시점에 호출
componentDidUpdate(prevProps, prevState, snapshot) {}
}
컴포넌트가 DOM에서 제거될 때 실행되는 메서드
class LifeCycle extends Component {
// 1. DOM에서 unmount 되어 제거되기 직전에 실행
componentWillUnmount(){}
}
일반적으로 React 컴포넌트는 선언형이다.
컴포넌트의state
,props
에 의존해 실시간으로 화면을 업데이트하는 것이 리액트에서 컴포넌트를 사용하는 이유!!
예를들어componentDidMount
를 사용해 실제 DOM 객체를 조작하는 것은 React에서 관리해주지 않는다.
이러한 부작용이 sideEffect
컴포넌트 렌더링, 라이프사이클 메서드가 실행될 때 오류가 발생한 경우 호출됨
자식 컴포넌트에서 오류가 발생되면 이를 감지하여 컴포넌트의 state.hasError
를 업데이트 한다.
render()
메서드는 업데이트 된 hasError
값을 조건 처리하여 오류를 렌더링 한다.
class LifeCycle extends Component {
state = { hasError: false }
// 자식 컴포넌트의 오류를 throw한 후 실행
static getDerivedStateFromError(error) {
// throw된 오류가 감지되면, hasError 상태 값을 true 처리
return { hasError: true }
}
render() {
// 오류 발생 시, 렌더링 과정에서 오류 메시지 반환
if (this.state.hasError) {
return <h1>오류발생</h1>
}
return <div />
}
}
자식 컴포넌트가 오류가 발생된 이후 실행됨
error
,info
2개의 매개변수가 전달되며 info
는 어떤 컴포넌트가 오류를 발생시켰는지에 대한 정보를 가진 componentStack
속성을 가진 객체이다.
class LifeCycle extends Component {
state = { hasError: false }
// 자식 컴포넌트의 오류를 throw한 후 실행
static getDerivedStateFromError(error) {
// throw된 오류가 감지되면, hasError 상태 값을 true 처리
return { hasError: true }
}
componentDidCatch(error, info) {
/*
info arg: 어떤 컴포넌트가 오류를 발생시켯는지에 대한 정보를 가진
componentStack 속성을 가진 객체
*/
logComponentStackToService(info.componentStack)
}
render() {
// 오류 발생 시, 렌더링 과정에서 오류 메시지 반환
if (this.state.hasError) {
return <h1>오류발생</h1>
}
return <div />
}
}