이번 포스팅은 API별로 헷갈리는 부분이 많아서 노트에 정리한 것 처럼 간결하게 작성했습니다.
React에서 컴포넌트는 여러 종류의 “생명주기 메서드"를 가지며, 이 메서드를 오버라이딩하여 특정 시점에서 코드가 실행되도록 설정할 수 있습니다. 아래에 설명할 LifeCycle은 클래스를 기반으로 작성되는 클래스 컴포넌트에만 해당되는 내용이며, 함수형 컴포넌트는 v16.8 업데이트 이후 Hook기능이 생기면서 해결되었습니다.
React에서 제공하는 생명주기 도표는 아래와 같습니다. 도표에 진하게 표시된 메서드는 자주 사용되는 생명주기 메서드입니다.
컴포넌트의 실행(Mount)
리액트 컴포넌트가 Instance로 생성되어 DOMtree에 삽입되어 브라우저 상에 나타나는 것
메서드 호출 순서 : constructor() 👉 static getDerivedStateFromProps() 👉 render() 👉 componentDidMount()
render()
클래스 컴포넌트에서 반드시 구현돼야 하는 유일한 메서드. 이 메서드가 호출되면 this.props와 this.state의 값을 활용하여 React element, 배열과 Fragmnt, Portal, 문자열과 숫자, Boolean 또는 null 중 하나를 반환.
- update시에도 호출O
- 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환하며 브라우저와 직접적으로 상호작용X. 즉, 순수하게 유지해야함
- shouldComponentUpdate()가 false를 반환하면 render()는 호출X
constructor(props)
컴포넌트를 새로 만들 때 마다 호출된느 클래스 생성자 메서드. this.state의 초기값 적용. 인스턴스에 이벤트 처리 메서드를 바인딩하기 위해 사용.
- React.Component를 상속한 컴포넌트의 constructor구현시에는 super(props)를 가장 먼저 호출해야함.
- constructor내부에서 setState 호출X
- constructor 내부에서 subscription 수행X
componentDidMount()
컴포넌트가 DOM tree에 삽입된 직후 호출되는 메서드. DOM을 사용해야하는 외부 라이브러리 연동(D3 등)을 하거나, 컴포넌트에서 필요로하는 데이터를 요청(ajax)을 하거나 DOM속성을 읽거나 직접 변경하는 작업에 사용.
- componentDidMount에서 setState를 호출하는 경우 render함수가 두 번 호출되므로 성능 문제가 있을 수 있음.
컴포넌트의 Update(Props, State)
리액트 컴포넌트가 업데이트 되는 것. Props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트가 리렌더링 될 때, 강제로 트리거를 발생시킬 때(this.forceUpdate)시에 컴포넌트가 업데이트 됨
메서드 호출 순서 : static getDerivedStateFromProps() 👉 shouldComponentUpdate() 👉 render() 👉 getSnapshotBeforeUpdate 👉 componentDidUpdate()
static getDerivedStateFromProps(props, state)
v16.3이후에 만들어진 라이프사이클 API. Props로 받아온 값을 state로 동기화하는 작업을 해줘야 하는 경우 사용. 최초 마운트시와 갱신 시 render() 메서드를 호출하기 직저에 호출되고, state갱신을 위한 객체나 null을 반환. nextProps와 prevState에 따라 component의 작업 여부 결정.
- 최초 마운트 시에도 호출O
- 이 메서드는 컴포넌트 인스턴스에 접근 할 수X
- 부모 컴포넌트가 리렌더링 될 때 실행O
- 해당 컴포넌트 내에서 지역적인 setState가 발생한 경우 실행X
shouldComponentUpdate(nextProps, nextState)
컴포넌트를 최적화하는 작업에서 매우 유용하게 사용. 컴포넌트가 다시 렌덩링을 할지 말지 결정하는 메서드. 렌더링을 방지하여 성능을 최적화하는 목적으로 사용.
- 초기렌더링 또는 forceUpdate()호출 시에는 호출되지X
getSnapshotBeforeUpdate(prevProps, prevState)
render메서드 호출 후 DOM의 변화를 반영하기 직전에 호출되는 메서드. 이 메서드에서 return하는 값을 componentDidUpdate에서 3번째 파라미터로 받을 수 있음.
- 발생시점 : render() 👉 getSnapshotBeforeUpdate() 👉 DOM에 변화 반영 👉 componentDidUpdate
componentDidUpdate(prevProps, prevState, snapshot)
리렌더링을 완료한 후 실행되는 메서드. 컴포넌트가 업데이트 되었을 시에 DOM을 조작하기 위해 사용.
- 최초 렌더링에서는 호출되지X
- componentDidUpdate에서 setState를 사용하면 무한 렌더링이 될 수 있으므로 주의
컴포넌트의 제거(Unmount)
리액트 컴포넌트가 DOM상에서 제거
componentWillUnmount()
컴포넌트가 DOM에서 제거되기 직전에 호출되는 메서드. 타이머를 제거(clear Timeout)하거나 외부 라이브러리 인스턴스를 제거하기 위해 사용
- componentWillUnmount가 호출된 컴포넌트는 다시 렌더링하지 않으므로 setState 호출하면X
컴포넌트 에러 발생
자식 컴포넌트를 렌더링하거나, 자식 컴포넌트가 lifeCycle메서드를 호출하거나, 자식 컴포넌트가 생성자 메서드를 호출하는 과정에서 오류가 발생했을 때 에러 발생
static getDerivedStateFormError(error)
하위의 자손 컴포넌트에서 오류가 발생했을 때 호출. 매개변수로 오류를 전달받고, 갱신된 state값을 반드시 반환해야 함.
- getDerivedStateFromError()는 render 단계에서 호출되므로, 부수 효과를 발생시키면X
componentDidCatch(error, info)
매개변수 error는 발생한 오류, 매개변수 info는 어떤 컴포넌트가 오류를 발생시켰는지에 대한 정보를 포함한 componentStack 키를 가지고 있는 객체.
- commit단계에서 호출되므로, 부수 효과를 발생시켜도O
- 대체 UI렌더링을 제어하기 위해서는 static getDerivedStateFromError()를 사용
v16.3이후에 사라진 API
componentWillMount()
컴포넌트가 화면에 나타나기 직전에 호출되던 API. 주로 서버사이드 호출하는 용도로 사용. constructor와 componentDidMount에서 충분히 처리가능.
componentWillReceiveProps()
컴포넌트가 새로운 props를 받게 됐을 때 호출되던 API. 새로운 API인 getDerivedStateFromProps로 대체.
componentWillUpdate()
shouldComponentUpdate에서 true를 반환했을 때만 호출되던 API. 주로 애니메이션 효과를 초기화하거나 이벤트 리스너를 없애는 작엄. 새로운 API인 getSnapshotBeforeUpdate로 대체
위의 내용들을 카운트예제로 확인하면 아래와 같습니다.
콘솔을 확인하면 아래와 같이 정상출력됩니다.
number가 5의 배수인 경우 리렌더링 되지 않는 것을 확인 할 수 있습니다.
참고
