생명 주기(Life Cycle)이란?
컴포넌트의 생명 주기로 세 가지 시점이 있다.
마운트
DOM이 생성되고 웹 브라우저상에 나타나는 시점이다.
이때 주로 외부 데이터를 가져오는 작업을 수행한다.
업데이트
생성된 컴포넌트가 변경되는 시점이다.
컴포넌트는 네 가지 경우에 변경된다.
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링될 때
- this.forceUpdate로 강제로 렌더링을 트리거할 때
언마운트
컴포넌트를 DOM에서 제거된 시점이다.
이때 주로 불필요한 리소스를 정리하는 작업을 수행한다.
클래스형 컴포넌트
라이프사이클 메서드
getDerivedStateFromProps
- render을 호출하기 직전에 호출된다.
- props로 받아 온 값을 state에 동기화시키는 용도로 사용한다.
render
- 컴포넌트를 렌더링하는 메서드로, 마운트와 업데이트 과정에서 호출된다.
- 유일한 필수 메서드다.
componentDidMount
- 컴포넌트가 마운트된 후 호출된다.
- 비동기 작업을 처리한다.
shouldComponentUpdate
리렌더링을 시작할지 여부를 지정한다.
getSnapshotBeforeUpdate
컴포넌트 변화를 DOM에 반영하기 직전에 호출한다.
주로 업데이트하기 직전의 값을 참고할 일이 있을 때 활용한다.
componentDidUpdate
리렌더링을 완료한 후 실행한다.
componentWillUnmount
컴포넌트가 웹 브라우저상에서 사라지기 전에 호출한다.
주로 DOM에 직접 등록했었던 이벤트를 제거한다.
componentDidCatch, getDerivedStateFromError
정상적인 생명 주기에서 실행되지 않고, 에러 상황에서 실행된다.
함수형 컴포넌트
함수형 컴포넌트에는 생명주기 메서드가 없다.
함수형 컴포넌트에선 useEffect 사용해 componentDidMount, componentDidUpdate, componentWillUnmount를 비슷하게 구현할 수 있다.
