7장 라이프사이클
라이프사이클이란?
라이프사이클 메서드의 종류는 총 9가지다.
will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고.
did 접두사가 붙은 메서드는 어떤 작업을 작동된 후에 실행되는 메서드다.
라이프사이클은 총 3가지, 즉 마운트, 업데이트, 언마운트 카테고리로 나눈다.
- 업데이트 -> 컴포넌트 정보를 업데이트
- 마운트 -> 페이지에 컴포넌트가 나타남
- 언마운트 -> 페이지에서 컴포넌트가 사라짐
마운트?
DOM이 생성되고 웹브라우저 상에 나타나는 것을 마운트라고 한다.
- 마운트할 때 호출하는 메서드
- 컴포넌트 만들기
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
constructor -> 컴포넌트를 새로 만들 때 호출되는 클래스 생성자 메서드
getDerivedStateFromProps -> props에 있는 값을 state에 넣을 때 사용하는 메서드
render : 우리가 준비한 ui를 렌더링 하는 메서드
componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
업데이트
컴포넌트는 다음과 같은 4가지 경우에서 업데이트를 한다.
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제 렌더링을 트리거할 때
업데이트시 호출되는 라이프사이클 메소드들
앞서 정리한 컴포넌트가 업데이트 되는 경우 들중 forceUpdate 를 제외한 나머지의 경우에 해당할때, 호출되는 라이프 사이클 메소드 들은 시간순서대로 정렬하여, 아래와 같다.
- getDerivedStateFromProps : 마운트 과정에서도 호출되는 메소드입니다, props의 변화에 따라 state에도 변화를 주고 싶을때 사용합니다.
- shouldComponentUpdate : 컴포넌트가 rerendering 될지에 대한 여부를 결정하는 메소드입니다. boolean값을 return하며 true인 경우에
rerendering을 진행합니다. (성능개선에 큰 영향을 미칩니다.) - render ( forceUpdate 를 호출하여 업데이트가 되는 경우에는 이 과정부터 진행됩니다. shouldComponentUpdate 여부를 따질 필요가 없기 때문이죠)
: component를 rerendering 합니다. - getSnapshotBeforeUpdate : component의 변화를 DOM에 반영하기 바로 직전에 호출하는 메소드
- componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메소드.
- componentDidCatch : 오류를 캐치해주는 메소드
정리
라이프 사이클 메서드는 컴포넌트 상태의 변화가 있을 때마다 실행하는 메서드다.
서드파티 라이버리를 사용하거나 DOM을 직접 건드려야하는 상황에서 유용하다.
컴포넌트 업데이트의 성능을 개선하기 위해서는 shouldComponentUpdate가 중요하게 사용된다.
