Contents1. Mount / Update / UnMount 2. render() 3. constructor 4. getDerivedStateFromProps 5. componentDidMount 6. shouldComponentUpdate 7. getSnapshotBeforeUpdate 8. componentDidUpdate 9. componentWillUnmount 10. componentDidCatch
모든 리액트 컴포넌트에는 라이프사이클이 존재합니다.
컴포넌트의 수명은 페이지에 렌더링 되기 전부터 페이지에서 사라질때 까지입니다.
라이프사이클을 사용하여 컴포넌트의 업데이트 전후로 작업을 할 수 있습니다.
라이프사이클은 클래스형 컴포넌트에서만 사용이 가능합니다.
함수형 컴포넌트에서 사용하려면 Hook Api 를 사용해야 합니다.
# 01 - Mount / Update / UnMount
라이프사이클은 Mount , Update, UnMount 이 세가지로
카테고리를 나눌 수 있습니다.
Mount
Mount 는 DOM 이 생성되고 웹브라우저상에 나타나는것을 말합니다.
이때 호출하는 메서드는
constructor -> getDerivedStateFromProps -> render -> componentDidMount
순서 입니다.
Update
1. props 가 바뀔때
2. state 가 바뀔때
3. 부모 컴포넌트가 리렌더링될 때
4. this.forceUpdate 로 강제로 렌더링을 발생시킬때
위와 같은 경우에 컴포넌트는 업데이트가 됩니다.
컴포넌트를 업데이트 할 때에 호출하는 메서드는
getDerivedStateFromProps -> shouldComponentUpdate -> render
-> getSnapshotBeforeUpdate -> componentDidUpdate 순서 입니다.
UnMount
UnMount 는 컴포넌트를 DOM 에서 제거하는것을 말합니다.
언마운트를 할 때에 호출하는 메서드는 componentWillUnmount 입니다.
render() 는 컴포넌트의 모양새를 정의합니다.
라이프사이클 메서드 중에서 유일하게 필수 메서드이기도 합니다.
render() 안에서 this.props 와 this.state 에 접근할 수 있으며
리액트 요소를 반환(return)합니다.
이 메서드 안에서 이벤트 설정이 아닌 곳에서 setState 를 사용하면 안됩니다.
또한 DOM 에 접근해서도 안됩니다.
DOM 의 정보를 가져오거나 state 를 변경하기 위해서는
componentDidMount 에서 처리하거나 다른 라이프사이클 메서드에서 처리해야 합니다.
constructor 는 컴포넌트의 생성자로 컴포넌트를 만들 때 처음으로 실행됩니다.
이 메서드에서는 초기 state 를 설정할 수 있습니다.
# 04 - getDerivedStateFromProps
이 메서드는 React v16.3 이후에 새로 생긴 메서드 입니다.
컴포넌트가 마운트될 때와 업데이트될 때, 즉 render 함수가 호출되기 직전
호출되는 메서드입니다.
이 메서드는 props 의 값을 state 에 동기화 시키는 용도로 사용합니다.
메서드를 사용할 때에 주의해야 할 점은 반드시 변경할 state (object) 값을 반환하거나 null 을 반환해야 합니다.
이 메서드는 컴포넌트가 마운트된 직후 실행되는 메서드 입니다.
이 안에서 다른 js 라이브러리, 프레임워크의 함수를 호출하거나
이벤트 등록, setTimeout, setInterval, 네트워크 요청같은
비동기 작업을 처리하는 용도로 사용합니다.
이 메서드는 props 또는 state 를 변경했을 때에
리렌더링의 시작 여부를 지정하는 메서드 입니다.
이 메서드는 반드시 true 또는 false 를 반환해야 합니다.
컴포넌트에서 이 메서드를 따로 생성하지 않으면 기본값으로 true 가 반환됩니다.
만약 이 메서드에서 false 를 반환한다면 업데이트는 중단되게 됩니다.
메서드 안에서 this.props 와 this.state 에 접근할 수 있으며
nextProps 와 nextState 에 접근하여 새로 설정될 props / state 에
접근할 수 있습니다.
이 메서드의 주된 기능은 프로젝트 성능을 최적화 할때 주로 사용됩니다.
# 07 - getSnapshotBeforeUpdate
이 메서드 또한 React v16.3 이후에 생긴 메서드 입니다.
이 메서드는 render 의 output이 DOM 같은 브라우저에
반영되기 직전에 호출됩니다.
이 메서드에서 반환하는 값은 componentDidUpdate 메서드의 파라미터로 전달됩니다.
주로 업데이트 직전의 값을 참고할 때에 사용되는 메서드 입니다.
이 메서드는 리렌더링을 완료한 후에 실행되게 됩니다.
prevProps 또는 prevState 를 이용하여 컴포넌트의 이전 값을
사용할 수 있습니다.
getSnapshotBeforeUpdate 에서 반환한 값은
세 번째 파라미터인 snapshot 으로 받아올 수 있습니다.
이 메서드는 컴포넌트를 DOM 에서 제거할 때 실행됩니다.
componentDidMount 에서 등록한 이벤트, 타이머, 직접 생성한 DOM 등을
이 메서드에서 제거 작업을 해야 합니다.
이 메서드는 React v16 에서 새롭게 도입되었습니다.
컴포넌트 렌더링 도중에 에러가 발생하면 이 메서드를 사용하여
오류 UI를 보여줄수 있습니다.
리액트의 컴포넌트 라이프사이클을 정리해 보자면 다음 그림과 같습니다.
Source : https://github.com/wojtekmaj/react-lifecycle-methods-diagram
본 블로그는 김민준(velopert)님의 저서 '리액트를 다루는 기술 (개정판)'을 참고하여 정리한 글입니다. 이점 참고 부탁드립니다.
