컴포넌트(Component)의 생명주기는 아래와 같은 단계로 나뉜다.
props
또는 state
가 변경될 때컴포넌트 인스턴스를 만들고 DOM을 삽입할 때 다음과 순서대로 진행된다.
componentDidMount()
제외한 나머지 라이프 사이클 메서드는 가상(Virital DOM)을 조작한다.
컴포넌트가 새로 생성 될 때 한 번만 실행하는 생성자 메서, constructor
는 this.state
의 초기값 적용, 인스턴스에 이벤트 처리 메서드를 바인딩 하기 위해 사용한다.
이 메서드는 컴포넌트 인스턴스에 접근 할 수 없다. 또한 이 메서드는 부모 컴포넌트가 다시 렌더링을 발생 시켰을 때 실행되고, 해당 컴포넌트 내에서 지역적으로
setState()
가 발생한 경우는 실행 되지 않는다.
getDerivedStateFromProps()
는 React v16.3 이후에 만들어진 라이프 사이클 메서드 이다.
최초 마운트 시와 갱신 시 모두에서 render()
메서드를 호출 하기 직전에 호출된다. state 갱신하기 위한 객체를 반환하거나, null
반환하여 아무것도 갱신하지 않을 수 있다.
static getDerivedStateFromProps(props, state)
클래스 컴포넌트에서 반드시 구현하는 메서드로 최종적으로 컴포넌트에서 작업한 결과물 UI를 렌더링 하는 메서드 이다.
📍 DOM Node가 있어야 하는 초기화 작업 componentDidMount()에서 이루어지면 안된다.
컴포넌트가 마운트된 직 후, 즉 DOM tree 삽입된 직 후 호출된다. fetch()
함수를 사용해서 외부에서 데이터를 불러와야 할 때 사용하기 적절하다.
class LifeCycle extends Component {
constructor(props) {
super(props);
console.log('LifeCycle 컴포넌트 생성');
}
// 전달된 상태 및 속성을 가져와 설정하는 시점에 호출 (업데이트)
static getDerivedStateFromProps(props, state) {
console.log('LifeCycle 컴포넌트 디라이브');
return null;
}
render() {
console.log('컴포넌트 렌더링');
return <div />
}
componentDidMount() {
console.log('컴포넌트 마운트 된 시점');
}
}
업데이트 라이프 사이클 메서드는 props
또는 state
가 변경될 경우 발생한다. 즉, 컴포넌트가 다시 렌더링 될 때 다음 순서로 실행된다.
컴포넌트 업데이트 예정 시점에 호출 (업데이트 하거나, 안 하거나)
컴포넌트가 다시 렌더링을 해야 할지 말아야 할지 결정하는 메서드 이다. 초기 렌더링 또는 forceUpdate() 호출 시에 이 메서드는 호출되지 않는다. 이 메서드는 렌더링을 방지하여 성능을 최적화 하는 목적으로 사용된다.
shouldComponentUpdate(nextProps, nextState)
render()
메서드 호출 후 DOM의 변화를 반영하기 직전에 호출되는 메서드 이다. 이 메서드에서 return 하는 값을 componentDidUpdate()
의 세 번째 매개변수로 전달할 수 있다. 즉, 컴포넌트 업데이트 전 스냅셧을 가져오는 시점에 호출하는 메서드.
getSnapshotBeforeUpdate(prevProps, prevState) {
// DOM 업데이트가 일어나기 직전의 시점!
// 새 데이터가 상단에 추가되어도 스크롤바를 유지하.
// scrollHeight 는 전,후를 비교해서 스크롤 위치를 설정하기 위함이고,
// scrollTop 은, 이 기능이 크롬에 이미 구현이 되어있는데,
// 이미 구현이 되어있다면 처리하지 않도록 하기 위함이다..
if (prevState.array !== this.state.array) {
const {
scrollTop, scrollHeight
} = this.list;
// 여기서 반환 하는 값은 componentDidMount 에서 snapshot 값으로 받아올 수 있다.
return {
scrollTop, scrollHeight
};
}
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot) {
const { scrollTop } = this.list;
// 기능이 이미 구현되어있다면 처리하지 않는.
if (scrollTop !== snapshot.scrollTop) return;
const diff = this.list.scrollHeight - snapshot.scrollHeight;
this.list.scrollTop += diff;
}
}
리렌더링을 완료한 후 실행되는 메서드이다. 최초 렌더링에서는 호출되지 않는다. 컴포넌트가 업데이트 되었을 시에 DOM을 조작하기 위해 사용한다.
componentDidUpdate(prevProps, prevState, snapshot)
📝 prevProps
업데이트 되기 전, props를 인자로 받을 수 있다. 이전 prop와 변경 여부를 비교하여 확인 후, 추가적인 액션을 설정하는게 유용하다.
📝 prevState
업데이트 되기 전, state 정보를 받을 수 있다. 이전 state와 비교하여 실행여부를 결정할 때 주로 사용한다.
📝 snapshot
getSnapshotBeforeUpdate()
구현시, 세번째 인자로 받을 수 있다
📍 componentWillUnmout()가 호출된 컴포넌트는 다시 렌더링 하지 않으므로 setState()를 호출 하면 안된다.
해당 되는 컴포넌트가 DOM에서 제거될 때 호출한다.
아래의 메서드들은 자식 컴포넌트를 렌더링 하거나, 자식 컴포넌트 생명주기 메서드를 호출하거나, 또는 자식 컴포넌트 생성자 메서드를 호출하는 과정에서 오류가 발생했을 때 호출된다.
하위의 자식 컴포넌트에서 오류가 발생했을 때 호출되는 메서드 이다. 이 메서드는 매개변수로 오류를 전달 받고, 갱신된 state
값을 반드시 반환해야 한다.
static getDerivedStateFromError(error)
자식 컴포넌트에서 오류가 발생했을 때 호출되면, 두 개를 매개변수를 전달 받는다.
componentDidCatch(error, info)
📝 Error
발생한 오류
📝 Info
어떤 컴포넌트가 오류가 발생시켰는지 정보를 포함한 componentStack 키를 갖고 있는 객체
React.Component →(SITE)