[ React ] 라이프사이클

라이프사이클

생명주기 메소드는 컴포넌트가 어떤 단계에 진입할때 자동으로 호출되는 메소드이다.

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

- defaultProps : 컴포넌트 클래스 자체 내에서 프로퍼티로서 정의. this.props의 기본값을 지정할 수 있게 된다. 이는 컴포넌트가 생성되기 전이나 부모로부터 속성이 전달될 때 실행된다.

1) Mounting 단계 :  DOM이 생성되고 브라우저에 나타나는 단계 

constructor() : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 . 메서드를 바인딩하거나 state를 초기화 하는 작업이 없다면, 생성자를 구현하지 않아도 된다. 

React 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 회출된다. React.Component를 상속한 컴포넌트의 생성자를 구현할때는 super(props)를 호출해야한다. ( this.props가 생성자 내에서 정의되지않아 버그 발생할수있음)

constructor() 내부에서 setState()를 호출하면 안된다. 

- 인스턴스에 이벤트처리 메서드 바인딩 

 

static getDerivedStateFromPropts(props, state) : props에 있는 값을 state에 넣을때 사용 

getDerivedStateFormProps는 render 메소드 호출 직전에 호출된다. state를 갱신하기 위한 객체를 반환하거나 null을 반환한다. 

 

render() : UI 렌더링하는 메서드 

this.props와 this.state의 값을 활용하여 값을 반환해야한다. shouldComponentUpdate()가 false를 반환하면 render()는 호출되지 않는다. 

반환 가능한 값은 아래와 같다. 

* React 엘리먼트 ( JSX , ... )

* 배열과 Fragment

* Portal 

* 문자열과 숫자 => DOM 텍스트 노드로 렌더링됌

* Boolean 또는 null 

 

componentDidMount() 

컴포넌트가 렌더링돼 DOM에 자리 잡은 직후 호출된다. DOM 쿼리 작업을 수행할 수 있다. props를 비교하여 필요시 네트워크 요청을 보낼수있다. 

* props 비교시 조건문을 사용하지않으면 무한 반복이 일어날 수 있다.

 

 

 

2) Updating 단계 - 컴포넌트는 다음의 경우에 업데이트를 한다. 

1. props 변경

2.state 변경

3.부모 컴포넌트가 리렌더링 될때 

4. this.forceUpdate가 실행될때 

 

static getDerivedStateFromProps()

shouldComponentUpdate(nextProps, nextState)

상태가 변경되었어도 업데이트가 안되야하는 상황일때 업데이트 여부를 제어할 수 있다. true/false 리턴에따라 업데이트여부가 결정된다.

(기본값 : true )

 

이 메소드 안에서 JSON.stringify()를 사용하는것을 권장하지않는다 ( 효율성이 낮음 ) 

render()

getSnapshotBeforeUpdate()

가장 마지막으로 렌더링된 결과가 DOM에 반영됐을때 호출된다. 사용시 컴포넌트가 DOM으로부터 스크롤 위치 등과 같은 정보를 변경되기전에 얻을 수 있다. 이 메서드가 반환하는 값은 componentDidUpdate() 에 인자로 전달된다.

componentDidUpdate(prevUpdate)

컴포넌트가 업데이튿되고 render 메소드의 실행이 끝난 후에 호출된다. setState()를 즉시 호출할 수도 있지만, 조건문으로 감싸지않으면 무한업데이트가 일어날 수 있다. 

getSnapShotBeforeUpdate()를 구현한다면, 해당 메서드가 반환하는 값은 세번째 snapshot인자로 넘겨진다. 반환값이없으면 해당 인자는 undefined를 가진다. 

 

3) Unmounting 단계

컴포넌트가 소멸되고 DOM에서 제거되는 언마운트단계이다. 이 단계에서는 오직 하나의 생명주기 메소드가 호출된다.

componentWillUnmount()

이 메소드에서 이벤트 리스너를 제거하거나 타이머를 중단시키는 등의 작업을 할 수있다. 이제 컴포넌트는 렌더링 되지 않으므로, setState()를 호출하면 안된다.

 

 

 

출처 : React 공식문서