01.9 React 컴포넌트 라이프사이클
React.js |
01.9. 컴포넌트의 라이프 사이클
리액트 컴포넌트에는 라이트사이클이 존재한다. 페이지에 렌더링되기 전 준비과정에서 시작하여 페이지에서 사라질 때 끝이난다.
라이프사이클 메서드는 총 열가지로 Will 접두가사 붙은 메서드는 어떤 작업을 작동하기 전에 실행되고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다.
라이프사이클은 총 세가지 (마운트, 업데이트, 언마운트)로 나눈다.
01.9.1. 라이프사이클 메서드
01.9.1.1. Mounting
React 컴포넌트의 인스턴스가 생성되고 DOM에 삽입되는 과정의 life cycle 입니다.
- constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드이다.
- getDerivedStateFromProps : props에 있는 값을 state에 동기화하는 메서드이다.
- render : 준비한 UI를 렌더링하는 메서드이다.
- componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드이다.
01.9.1.2. Updating
prop 또는 state의 변경, 부모 컴포넌트 리렌더링, this.forceUpdate로 강제로 렌더링을 트리거할 때의
라이프 사이클입니다.
라이프 사이클입니다.
- getDerivedStateFromProps :
마운트 과정에서도 호출되며, props가 바뀌어서 업데이할 때도 호출된다. - shouldComponentUpdate :
컴포넌트가 리렌더링을 해야할지 말아야할지 결정하는 메서드이다.(false를 리턴할 경우 아래 메서드는 호출되지 않는다) - render : 컴포넌트를 리렌더링한다.
- getSnapshotBeforeUpdate :
컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드이다. - componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드이다.
01.9.1.3. Unmounting
- componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드이다.
01.9.2. 라이프사이클 흐름도
라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다.
댓글
댓글 쓰기