이번 포스팅에서는 React의 LifeCycle에 대해 알아보도록 하겠습니다. 본 포스팅은 리액트를 다루는 기술이라는 서적을 참고하여 작성되었습니다.
1. 라이프 사이클 메소드 종류
라이프 사이클 메서드의 종류는 크게 3가지로 나뉩니다. 아래에서 조금더 자세히 보시죠.
1.1 마운트
첫번째 종류는 마운트입니다. 우선, 마운트란 DOM이 생성되고 웹브라우저상에 나타나는 것을 의미합니다.
마운트시 호출되는 라이프사이클 메소드들
마운트시 호출되는 라이프 사이클 메소드들은 시간순서대로 정렬하여, 아래와 같습니다.
- constructor : 컴포넌트 생성시 호출되는 클래스 생성자 메소드
- getDerivedStateFromProps : props에 있는 값을 state에 넣을때 사용하는 메소드
- render : UI를 렌더링할때 사용하는 메소드
- componentDidMount : 컴포넌트가 웹브라우저상에 나타난 뒤 호출되는 메소드
1.2 업데이트
우선, 컴포넌트가 업데이트 되는 경우는 아래와 같습니다.
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 rerendering 될 때
- this.forceUpdate로 강제 렌더링할 때
업데이트관련 라이프사이클 정의시 주의할점
update 관련 라이프사이클을 정의할 때, 메소드 내부에서는 위에서 언급한 컴포넌트가 업데이트 되는 경우를 발생시키는 로직을 구현하면 안됩니다. (ex. setState()) 이러한 로직은 다시 업데이트를 발생시키고, 다시 업데이트를 발생시키는 로직이 실행되고를 반복하기 때문에 결국 프로그램이 죽게됩니다.
업데이트시 호출되는 라이프사이클 메소드들
앞서 정리한 컴포넌트가 업데이트 되는 경우들중 forceUpdate를 제외한 나머지의 경우에 해당할때, 호출되는 라이프 사이클 메소드들은 시간순서대로 정렬하여, 아래와 같습니다.
- getDerivedStateFromProps :
마운트과정에서도 호출되는 메소드입니다, props의 변화에 따라 state에도 변화를 주고 싶을때 사용합니다.
- shouldComponentUpdate : 컴포넌트가 rerendering 될지에 대한 여부를 결정하는 메소드입니다. boolean값을 return하며 true인 경우에 rerendering을 진행합니다. (성능개선에 큰 영향을 미칩니다.)
- render (
forceUpdate를 호출하여 업데이트가 되는 경우에는 이 과정부터 진행됩니다. shouldComponentUpdate 여부를 따질 필요가 없기 때문이죠) : component를 rerendering 합니다.
- getSnapshotBeforeUpdate : component의 변화를 DOM에 반영하기 바로 직전에 호출하는 메소드
- componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메소드.
1.3 언마운트
컴포넌트를 DOM에서 제거하는 것을 언마운트라고 합니다.
언마운트할 때 호출되는 메소드
- componentWillUnmount : 컴포넌트가 웹브라우저상에서 사라지기 전에 호출하는 메소드
2. 라이프사이클 메소드 자세히 보기
2.1 render()
이 메소드에서는 개발자가 컴포넌트의 모양을 정의하게 됩니다. 따라서 컴포넌트를 정의할때에는 필수적으로 요구되는 메소드입니다. (모든 라이프사이클 메소드중 유일하게 필수적입니다.)
render 메소드 주의사항
- setState를 사용하면 안됩니다 (이벤트 설정하는 곳에서는 가능합니다. ex) onClick={} )
- DOM에 접근하면 안됩니다.
위에 해당하는 경우에는 componentDidMount에서 처리해야 합니다. setState()메소드의 경우 state를 변화시키는데 이때 update가 발생하게 되며, update의 라이프사이클에의해 다시 render()가 호출됩니다. 따라서 결국 무한대로 위작업을 반복하게 됩니다.
2.2 constructor()
컴포넌트 생성시 최초로 생성될때 실행됩니다. 이 메소드에서 초기 state를 설정합니다.
2.3 getDerivedStateFromProps()
props로 받아온 값을 state에 동기화할때 사용합니다.
2.4 componentDidMount()
컴포넌트 생성후 렌더링을 마친후 실행합니다. 이 메소드안에서는 다음의 경우에 해당하는 작업들을 행합니다.
- 타 자바스크립트 라이브러리 호출
- 이벤트 등록
- setTimeout
- setInterval
- 네트워크 요청
- 비동기 작업
2.5 shouldComponentUpdate()
이 메소드는 component가 update되어 다시 rendering 되는 상황을 제어할 수 있도록 도와주는 라이프사이클 메소드입니다. 이 메소드가 true를 반환하면, 이후의 update 라이프사이클을 진행하며, false인 경우에는 더이상 진행되지 않습니다.
이 메소드를 별도로 구현하지 않으면 true를 자동으로 반환합니다.
성능개선시에는 이 메소드의 알고리즘 구현이 매우 중요하게 작용됩니다.
2.6 getSnapshotBeforeUpdate()
이 메소드는 render를 통해 만들어진 결과물이 브라우저에 반영되기 직전에 호출됩니다. 보통은 업데이트가 이루어지기 전의 값을 참고할 일이 있을 때 사용합니다.
또한 이메소드에서 return한 값은 componentDidUpdate의 세번째 파라미터인 snapshot으로 전달받을 수 있습니다.
2.7 componentDidUpdate()
rerendering이 완료된 후 실행하는 메소드입니다. 업데이트가 끝난 후이므로 DOM관련 작업을 행해도 무방합니다.