컴포넌트 라이프사이클
🔍 리액트 컴포넌트의 라이프사이클
- 마운트 : DOM이 생성된 후 웹 브라우저에 나타나는 것.
- 업데이트 : 컴포넌트에서 props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트 리렌더링 때, this.forceUpdate로 강제 렌더링할 때
- 언마운트 : 마운트의 반대 과정. DOM에서 컴포넌트를 제거하는 과정
아래에서 살펴보는 라이프사이클 메서드들은 클래스형 컴포넌트에서 사용하는 것으로, 함수형 컴포넌트에서는 사용할 수 없으나 Hooks 기능으로 유사한 기능을 활용하게 됩니다.
✏️ render() 함수 (마운트)
이 메서드는 컴포넌트 모양을 정의하는 함수로 클래스형 컴포넌트에서 항상 빠지지 않고 나왔던 메서드입니다. 라이프사이클 메서드들 중에 유일하게 필수 메서드입니다. 준비한 UI를 렌더링합니다.
- 주의점
- 이 메서드 내부에서 this.props, this.state에 접근 가능, 리액트 요소를 반환
- 이 메서드 내부에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안 됨
- 브라우저의 DOM에 직접 접근하면 안 되고, DOM 정보를 가져오거나 state를 변화시키고 싶다면 componentDidMount 메서드에서 처리해야 함
✏️ getDerivedStateFromProps 메서드
리액트 버전 16.3 이후 새로 만들어진 메서드로, props로 받아온 값을 state에 동기화시키는 용도로 사용합니다. 컴포넌트 마운트 및 업데이트시 호출됩니다.
✏️ componentDidMount 메서드 (마운트)
컴포넌트를 만들고 첫 렌더링을 마친 후에 실행하는 메서드로, 다른 자바스크립트 라이브러리, 프레임워크 함수를 호출하거나 setInterval, 이벤트 등록, 네트워크 요청 같은 비동기 작업을 이 메서드로 처리합니다.
✏️ shouldComponentUpdate 메서드
props 혹은 state를 변경 시 컴포넌트의 리렌더링을 시작할지 여부를 지정합니다. 이 메서드는 따라서 반드시 true 혹은 false를 반환해야 합니다. 컴포넌트 생성 시 이 메서드를 따로 생성하지 않을 경우 기본적으로 true 값이 반환되게 설정되어 있습니다.
이 메서드 내부에서 현재 props, state는 this.props, this.state로 접근 가능합니다. 새로 설정될 props, state는 각각 nextProps, nextState로 접근 가능합니다.
전체 프로젝트의 성능을 최적화하는 부분에 있어 상황에 맞게 리렌더링을 방지할 때, false값을 반환하게 할 수 있습니다. 즉 이 메서드는 성능 최적화 부분에서 활용될 수 있습니다.
✏️ getSnapshotBeforeUpdate 메서드
리액트 버전 16.3 이후 새로 만들어진 메서드로, render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전 호출됩니다. 이 메서드가 반환하는 값은 후술할 componentDidUpdate 메서드의 세 번째 파라미터인 snapshot 값으로 전달받을 수 있으며, 주로 업데이트 직전 값을 참고해야 할 때 사용합니다. (EX: 스크롤바 위치 유지 등)
✏️ componentDidUpdate 메서드
리렌더링을 완료한 후 실행하는 메서드로, 업데이트가 끝난 직후라서 DOM 관련 처리를 해도 무방합니다.
여기서 prevProps, prevState 를 사용해서 컴포넌트가 이전에 가진 데이터에 접근이 가능하며, 위에서 서술한 getSnapshotBeforeUpdate 메서드에서 반환한 값을 이 메서드가 전달받을 수 있습니다.
componentDidUpdate(prevProps, prevStae, snapshot) { … }
✏️ componentWillUnmount 메서드
컴포넌트를 DOM에서 제거할 때 실행하는 메서드로 componentDidMount 에서 등록한 이벤트, 타이머, 직접 생성한 DOM 등을 여기서 제거 작업해야 합니다.
✏️ componentDidCatch 메서드
리액트 버전 16에서 새로 만들어진 메서드로, 컴포넌트 렌더링 도중에 에러가 발생하면 먹통이 되지 않고 오류 UI를 보여주게 합니다.
1
2
3
4
5
6
componentDidCatch(error, info) {
this.setState({
error: true
});
console.log({error, info});
}
메서드의 error 에는 어떤 에러가 발생했는지 넘겨받게 되고, info 에는 어디의 코드가 오류가 발생했는지 정보를 넘겨받게 됩니다.
이 메서드는 자신의 컴포넌트 에러는 잡아내지 못하며 자신의 this.props.children 으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있습니다.
- 여기서 props.children 이란? - https://chanhuiseok.github.io/posts/react-5/ 참고하기
이 포스팅은 리액트를 다루는 기술(저자 김민준)을 학습하는 과정에서 개인적으로 정리한 내용입니다.