Lifecycle methods : 생명주기 메서드, 컴포넌트가 브라우저상에 나타나고
업데이트 되고 사라지게 될때 호출되는 메서드
- Lifecycle methods는 클래스형 컴포넌트에서만 사용 가능
<마운트 > 컴포넌트의 인스턴스가 생성되어 Dom 상에 삽입될때 순서대로 호출
constructor : 컴포넌트의 생성자 메서드, 컴포넌트가 만들어지면
가장 먼저 실행
getDerivedStateFromProps: props로 받아온 것을 state에 넣어주고 싶을때 사용 (잘 사용하지 않음)
render
componentDidMount: 첫번째 렌더링이 마치고 나면 호출되는 메서드,
만든 컴포넌트가 화면에 나타난 상태가 호출되는 시점, 외부 라이브러리를
연동하거나 해당 컴포넌트에서 필요한 데이터를 요청하기 위해 axios,fetch등을 통해 요청하거나 Dom의 속성을 읽거나 직접 변경하는
작업을 진행
<업데이트> : 컴포넌트가 업데이트 되는 시점에 호출
getDerivedStateFromProps
shouldComponentUpdate :컴포넌트가 리렌더링 할지 말지 결정하는 메서드
render
getSnapshotBeforeUpdate :마지막으로 렌더링된 결과가 DOM에
반영되기 전에 호출 ( 잘 사용 안함)
componentDidUpdate: 리렌더링이 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드입니다. 3번째 파라미터로 getSnapshotBeforeUpdate 에서 반환한 값을 조회 할 수 있습니다.
<언마운트 >
컴포넌트가 화면에서 사라지는 것을 의미
* componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출
Dom에 직접 등록했던 이벤트를 제거 , 외부 라이브러리를 사용한게 있고
해당 라이브러리에 dispose 기능이 있으면 여기서 호출
출처: https://react.vlpt.us/basic/25-lifecycle.html
https://ko.reactjs.org/docs/react-component.html
