라이프사이클 메서드?
리액트의 라이프사이클 메서드는 컴포넌트가 생성되고, 업데이트되며, 제거되는 과정 동안
특정한 시점에 실행되는 메서드입니다.
클래스형 컴포넌트에서만 사용할 수 있습니다.
라이프 사이클 메서드는 총 아홉 가지입니다.
Will접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 작동하는 메서드
Did접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드
라이프사이클 메서드는 크게 마운팅(Mounting), 업데이트(Updating), 언마운팅(Unmounting)의 세 가지 카테고리로 나눌 수 있습니다.
마운트
DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 합니다.
이때 호출하는 메서드는 다음과 같습니다.
<컴포넌트 생성>
▼
<constructor>
▼
<getDerivedStateFromProps>
▼
<render>
▼
<componentDidMount>constructor
⇒ 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드입니다.
getDerivedStateFromProps
⇒ props에 있는 값을 state에 넣을때 사용하는 메서드입니다.
render
⇒ 저희가 준비한 UI를 렌더링하는 메서드입니다.
componentDidMount
⇒ 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드입니다.
업데이트
컴포넌트는 다음과 같이 총 네 가지 경우에 업데이트합니다.
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링될 때
- this.forceUpdate로 강제 렌더링을 트리거할 때
이와 같은 조건에 의해 컴포넌트를 업데이트할 때는 다음 메서드를 호출합니다.
업데이트를 발생시키는 요인
<props변경, state변경, 부모컴포넌트 리렌더링>
▼
<getDerivedStateFromProps>
▼
<shouldComponentUpdate>
▼
<render>
▼
<getSnapshotBeforeUpdate>
▼
<componentDidUpdate>getDerivedStateFromProps
⇒ 마운트 과정에서도 호출되는 메서드이며, 업데이트가 시작하기 전에도 호출됩니다.
⇒ props의 변화에 따라 state값에도 변화를 줄 때 사용합니다.
shouldComponentUpdate
⇒ 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드입니다.
⇒ 이 메서드에서는 true/false를 반환하며 true를 반환할 시 다음 라이프사이클메서드를 계속 실행하고 false를 반환하면 작업을 중지합니다.(즉, 컴포넌트가 리렌더링되지 않습니다.)
render
⇒ 컴포넌트를 리렌더링합니다.
getSnapshotBeforeUpdate
⇒ 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드입니다.
componentDidUpdate
⇒ 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드입니다.
언마운트
마운트의 반대 과정
즉 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 합니다.
<언마운트하기>
▼
<componentWillUnmout>componentWillUnmout
⇒ 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드입니다.
