이번에는 다시 react로 돌아가 react의 Lifecycle 즉,
리액트의 생명주기를 정리하려고 한다.
Lifecycle?
react의 component가 생성 후 업데이트, 소멸 이 과정을 Lifecycle
생명주기라고 한다.
과정
Mount
컴포넌트가 처음 실행 될 때 표현
-
constructor(): 생성자 메서드. 컴포넌트가 생성될 때, 단 한번만 실행되며 이 메서드에서만 state를 설정할 수 있다. -
componentWillMount(): React 요소를 DOM노드에 추가하기 직전에 호출되는 메서드. DOM이 생성되기 전이므로 DOM조작이 불가능
(React 17버전부터 Will 관련 라이프사이클을 사라지게 한다 했다고 합니다.) -
render(): 컴포넌트를 DOM에 부착(렌더링). -
componentDidMount(): 컴포넌트가 첫 생성 후 발생 메서드
Props Update
컴포넌트가 변경될 때 표현
-
componentWillReceiveProps(): 업데이트 직전에 업데이트를 감지하여, 실행되는 메서드. (state 변경 시에는 호출 안됌) -
shouldComponentUpdate(): 컴포넌트 변경전에 호출되는 메서드. props 또는 state가 변경되었을 때, 재렌더링 여부를 return값으로 결정하게 된다. -
componentWillUpdate(): 위 메서드가 호출된 후, 컴포넌트 변경 전에 호출되는 메서드. 새로운 props 또는 state가 반영되기 직전에 변경된 값들을 받는다. -
render(): 컴포넌트를 렌더링함. -
componentDidUpdate(): 리렌더링이 끝나고, 화면에 변화시킨 내용이 모두 반영되고 난 뒤에 호출되는 메서드.
또한,
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
위 세가지 메서드의 첫번째 인자에는 변경될 Props에 대한 정보를 가지고 있다.
componentDidUpdate()는 이미 변경된 상태여서 정보는 없다.
Unmout
컴포넌트가 제거되는 것
componentWillUnmount(): 더 이상 컴포넌트를 사용하지 않을 때 호출되는 메서드.componentWillMount()에서 연결한 이벤트 리스너를 제거할 때 주로 사용된다. (정리 활동)
