React 라이프사이클

1. 마운트

• DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다.
• constructor -> getDerivedStateFromProps -> render => componentDidMount 순으로 수행
• constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
• getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드
• render: UI를 렌더링하는 메서드
• componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드(Vue로 치면 mount() ) 아마 여기에서 DOM 접근이 가능할듯

 

2. 업데이트

• prpos가 바뀔 때
• state가 바뀔 때
• 부모 컴포넌트가 리렌더링될 때
• this.forceUpdate로 강제로 렌더링을 트리거 할 때
• 위 네 가지 경우에 업데이트가 일어난다.
• getDerivedStateFromProps: 마운트 과정에서 호출되며, 업데이트가 시작하기 전에 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용
• shouldComponentUpdate: 리렌더링할지 말지 결정하는 메서드로써 true 혹은 false 값을 리턴해야하고 true를 반환하면 다음 라이프 사이클 메서드를 계속 실행하고 false를 리턴하면 작업을 중지한다.
• render: 컴포넌트를 리렌더링한다.
• getSnapshoteBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
• componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

 

3. 언마운트

• 컴포넌트를 DOM에서 제거하는 구간
• componentSillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드