리액트 컴포넌트에는 생명주기(Life Cycle)이라는 것이 존재한다.
한 컴포넌트의 수명은 화면에 렌더링 되기 이전 ~ 화면에서 사라질 때 이다.
컴포넌트를 처음으로 렌더링 할 때, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하고 싶을 경우,
생명주기 메소드, Life Cycle Method를 사용한다.
이러한 생명주기 메소드는 클래스형 컴포넌트에서만 사용 할 수 있다.
Life Cycle Method
라이프사이클은 Mount, Update, Unmount로 나뉜다.
Mount
컴포넌트가 처음 실행되어 DOM이 생성되는 단계이다.
Mount 단계에서 호출되는 메소드는 아래와 같다.
constructor
컴포넌트의 생성자 메소드로, 컴포넌트가 만들어지면 가장 먼저 실행되는 메소드이다.
초기 state를 정할 수 있다.
getDerivedStateFromProps
props 로 받아온 것을 state 에 넣어줄 때 사용한다.
특정 객체를 반환하게 되면 해당 객체 안에 있는 내용들이 컴포넌트의 state 로 설정된다.
null 을 반환하게 되면 아무 일도 발생하지 않는다.
+Update 시에도 호출된다.
render
컴포넌트를 렌더링하는 메소드이다. 클래스 컴포넌트에서 반드시 구현되어야하는 필수 메소드이다.
componentDidMount
컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메소드로, 컴포넌트가 화면에 나타난 시점에 호출된다.
DOM에 접근하여 사용 할 수 있어
- DOM 을 사용해야하는 외부 라이브러리 연동을 하거나,
- 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 ajax 요청을 하거나,
- DOM 의 속성을 읽거나 직접 변경하는 작업을 진행한다.
Update
컴포넌트가 업데이트 되는 단계이다.
Update 단계에서 호출되는 메소드는 아래와 같다.
getDerivedStateFromProps
Mount 단계에서도 호출되었던 메소드로, 컴포넌트의 props 나 state 가 바뀌었을때도 이 메소드가 호출된다.
shouldComponentUpdate
컴포넌트가 업데이트 되었을 때, 리렌더링 여부를 결정하는 메소드이다.
기본 값은 true이며, false를 리턴하면 렌더링을 취소한다.
프로젝트의 성능을 최적화할 때 사용한다.
render
컴포넌트를 렌더링하는 메소드이다.
getSnapshotBeforeUpdate
가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출된다.
컴포넌트에 변화가 일어나기 직전 가장 마지막의 DOM 상태를 가져와서 반환한다.
이 메소드로 반환된 값을 componentDidUpdate 메소드의 세 번째 파라미터인 snapshot 값으로 사용할 수 있다.
주로 업데이트하기 직전의 값을 참고할 일이 있을 때 활용한다.
componentDidUpdate
리렌더링을 마치고, 화면에 변화가 모두 반영되고 난 뒤 호출되는 메소드이다.
Unmount
컴포넌트가 화면에서 사라지는 단계이다.
Unmount 단계에서 호출되는 메소드는 아래와 같다.
componentWillUnmount
컴포넌트가 화면에서 사라지기 직전에 호출됩니다.
보통 componentDidMount에서 DOM에 직접 등록했었던 이벤트, 타이머, 직접 생성한 DOM 등을 제거해준다.
추가 메소드
componentDidCatch
사전에 예외처리를 하지 않은 에러가 발생 했을 때 에러를 처리해준다.
컴포넌트 렌더링 도중에 에러가 발생했을 때 애플리케이션이 먹통이 되지 않고, 에러 화면을 보여 줄 수 있도록 한다.
참고자료
https://react.vlpt.us/basic/25-lifecycle.html
https://velog.io/@youngminss/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0-%EB%A9%94%EC%84%9C%EB%93%9C#8-componentwillunmount
https://shape-coding.tistory.com/entry/React-React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%83%9D%EB%AA%85-%EC%A3%BC%EA%B8%B0-Life-Cycle
