[REACT] LIFE CYCLE - 수명주기

 

Life Cycle

- 컴포넌트 상태에 변화가 있을 때 마다 실행하는 메소드

- Third Party 라이브러리를 사용하거나, DOM을 직접 건드려야 하는 상황에서 유용

 

 

1. 마운트 : DOM이 생성되고 웹 브라우저상에 나타내는 것

 

constructor 메소드

- 컴포넌트의 생성자 메소드로 컴포넌트를 만들 대 처음으로 실행

- 초기 state 정의

 

getDerivedStateFromProps( )

- props에 있는 값을 state에 동기화하는 메소드

- 컴포넌트를 마운트하거나 props를 변경할 때 호출

 

render( ) 함수

- 컴포넌트 모양새 정의

- this.props와 this.state에 접근 가능

- 리액트 요소 반환 (아무것도 보여주지 않고싶으면 null값이나 false값 반환)

- 절대로 state를 변형해서는 안되며, 웹 브라우저에 접근해서도 안됨

- DOM 정보를 가져오거나 변화를 줄 때는 componentDidMount에서 처리

 

componentDidMount( )

- 컴포넌트가 웹 브라우저상에 나타난 후에 호출하는 메소드

- 컴포넌트를 만들고 , 첫 렌더링을 다 마친 후 실행

- 비동기 작업 처리

 

 

2. 업데이트 : 컴포넌트 정보를 업데이트

 

업데이트 되는 경우

- props / state 가 바뀔 때

- 부모 컴포넌트가 리랜더링될 때

- this.forceUpdate로 강제로 렌더링을 트리거할 때

 

getDerivedStateFromProps( )

- 마운트 과정에서도 호출하거나 props가 바뀌어서 업데이트 할 때

 

shouldComponentUpdate( )

- props 또는 state를 변경했을 때, 리랜더링을 시작할지 여부를 지정하는 메소드

 

render( )

- 컴포넌트 리랜더링

 

getSnapshotBeforeUpdate

- render 메소드를 호출한 후 DOM에 변화를 반영하기 바로 직전에 호출하는 메소드

 

componentDidUpdate( )

- 리랜더링을 완료한 후 실행

- 업데이트가 끝난 직후이므로,  DOM 관련 처리를 해도 무방

 

 

3. 언마운트 : 컴포넌트를 DOM에서 제거하는 것

 

componentWillUnmount( )

- 컴포넌트를 DOM에서 제거할 때 실행

- componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있으면, 여기서 제거 작업

 

 

# 'will' 접두사가 붙은 메소드는 어떤 작업을 작동하기 전에 실행되는 메소드

# 'did' 접두사가 붙은 메소드는 어떤 작업을 작동한 후에 실행되는 메소드