0. 라이프사이클

모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 말 그대로 생명주기입니다. 컴포넌트가 마운트 되기 전 후, 업데이트가 되는 시기, 또 언마운트된 시기 등 10가지의 메서드로 라이프사이클이 정의됩니다. 


1. 마운트 단계

:페이지에 컴포넌트가 나타남

1) constructor : 컴포넌트 클래스 생성자

2) getDerivedStateFromProps : State를 Prop와 동기화하는 단계에 불리는 메서드

3) render : 렌더링 단계에 불리는 메서드

4) componentDidMount : 마운트 후 불리는 메서드


2. 업데이트 단계

컴포넌트 정보를 업데이트 함(리렌더링)

5) getDerivedStateFromProps : State를 Prop와 동기화하는 단계에 불리는 메서드(마운트 단계 뿐 아니라 업데이트 단계에서도 호출됩니다)

6) shouldComponentUpdate : 컴포넌트 리렌더링 여부를 결정하는 메서드, false 리턴시 업데이트 하지 않습니다.

* 최적화를 위해서 중요한 메서드입니다. 리렌더링을 최소화 하기 위해서 잘 활용해야 합니다.

7) render : 리렌더링 단계에 불리는 메서드

8) getSnapshotBeforeUpdate: 컴포넌트 변화를 Virtual Dom에서 Dom으로 반영 직전 불리는 메서드

9) componentDidUpdate: 컴포넌트의 업데이트 후 불리는 메서드

업데이트는 props, state가 변경될 때, 부모 컴포넌트가 리렌더링될 때, forceUpdate가 호출 될 때 이렇게 4가지 경우에 호출됩니다.


3. 언마운트 단계

:페이지에서 컴포넌트가 사라짐

10) componentWillUnmount : 컴포넌트가 사라지기 직전에 불리는 메서드



'Web Front > React.js' 카테고리의 다른 글

[React] create-react-app으로 React App 만들기  (0) 2018.08.06