모든 리액트 컴포넌트에는 라이프 사이클(수명 주기)이 존재합니다.
클래스형 컴포넌트에서만 사용이 가능하고, 함수형 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있습니다.
메서드의 종류는 총 9가지 입니다.
DOM이 생성되고 웹브라우저상에 나타나는 것을 마운트 라고 합니다.
이때 호출하는 메서드는 다음과 같습니다.
컴포넌트는 다음 4가지 경우에 업데이트 합니다.
컴포넌트를 업데이트할 때는 다음 메서드를 호출합니다.
마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 말합니다.
호출하는 메서드는 다음과 같습니다.
컴포넌트에서 가장 중요한 메서드
constructor(props) { ... }
컴포넌트의 생성자 메서드로 초기 state를 설정 할 수 있습니다.
리액트 v16.3 이후에 새로 생긴 메서드
props로 받아 온 값을 state에 동기화시키는 용도로 사용합니다.
컴포넌트가 마운트/업데이트 될 때 호출됩니다.
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.value !== prevState.value) {
return { value: nextProps.value };
}
return null;
}
componentDidMount() { ... }
컴포넌트를 만들고, 처음 렌더링을 마친 후 실행합니다.
아래와 같은 작업을 처리할 때 사용합니다.
shouldComponentUpdate(nextProps, nextState) { ... }
props, state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서드
리액트 v16.3 이후 만들어진 메서드
render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출합니다.
주로 업데이트하기 직전의 값을 참고할 때 활용됩니다.
getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevState.array !== this.state.array) {
const { scrollTop, scrollHeight } = this.list
return { scrollTop, scrollHeight };
}
}
componentDidUpdate(prevProps, prevState, snapshot) { ... }
리렌더링을 완료한 후에 실행합니다.
componentWillUnmount() { ... }
컴포넌트를 DOM에서 제거할 때 실행합니다.
componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 제거 작업을 해야합니다.
컴포넌트 렌더링 중 에러가 발생했을 때 오류 UI를 보여주는 메서드
componentDidCatch(error, info) {
this.setState({
error: true
});
console.log({ error, info });
}
오류가 발생하면 서버 API를 호출하여 따로 수집할 수도 있습니다.
그러나 컴포넌트 자신에게 발생하는 에러는 잡을 수가 없고, this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있습니다.
리액트를 다루는 기술(개정판)을 정독하면서 서술한 내용입니다.