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 |
---|