함수형 컴포넌트 사용 증가로 lifecycle에 대해 깊게 다루지 않았습니다.
이 글의 목적은 Hook을 보다 쉽게 이해하기 위함이기 때문에 더 많은 공부를 위해서는 공식 문서를 직접 찾아보시기 바랍니다. Lifecycle
React에는 Lifecycle 즉 생명주기가 존재한다. 정확하게는 컴포넌트의 생명주기가 존재한다고 해야한다. React 내에서 컴포넌트는 생성, 수정, 제거의 과정을 거치도록 설계되었다.
우리가 Lifecycle에 대해 다루는 이유는 당연히 컴포넌트을 명확하게 통제할 수 있기 때문이다. 또한, React를 하면서 반드시 사용하는 Hook에 대한 이해도 더 직관적으로 할 수 있다.
Lifecycle의 분류
Lifecycle은 크게 세 가지로 나눌 수 있다.
- 생성될 때 (마운팅)
- 업데이트 할 때 (업데이팅)
- 제거 할 때 (언마운팅)
마운트
컴포넌트가 DOM에 생성되기 전까지의 Lifecycle 이벤트 들이다.
consturctor(props)
class의 생성자를 의미한다. class가 생성될 때 한 번 호출되며, 컴포넌트의 state 설정이 필요한 경우 constructor에서 진행한다.
class MyComponent extends React.Component {
constructor(props) {
super(props) // 상속 받을 경우 가장 먼저 와야함
/* 1. state 초기화 */
this.state = {
// ...
}
/* 2. 인스턴스에 이벤트 메서드 바인딩 */
this.onClick = this.onClick(this)
}
onClick() {
console.log(this)
}
}
export default MyComponentstatic getDerivedStateFromProps(props, state)
최초 생성 시와 업데이트 시 사용되는 메서드이며, static 이기 때문에 this를 사용할 수 없다.
렌더링될 때 매번 실행되므로 유의하여 컴포넌트를 작성해야 한다.
이 메서드는 props에 의해 state가 변경되어야 할 경우인데, 드물게 사용한다고 한다. 이 Lifecycle 이벤트를 사용하는 경우라면 다음과 같은 경우인지 확인하고, 다른 대안으로 작성하는 것을 권장한다.
render()
모든 컴포넌트가 반드시 구현해야하는 메서드로 return 값으로 다음 중 하나를 반환해야 한다.
- React element: JSX 문법으로 작성된 메서드
- 배열과 Fragment: 여러개의 React element를 반환
- Portal: 루트 노드 외 별도의 DOM 트리에 자식 element를 렌더링
- 문자열 및 숫자: 텍스트 노드로서 렌더링
- Boolean 또는 null
componentDidMount()
컴포넌트가 DOM 트리에 마운트 된 이후 실행된다. 외부에서 데이터를 불러오기 적절한 위치이며, 데이터에 대한 구독도 설정하기 적절한 위치이다.
업데이트
컴포넌트가 생성되고, props 또는 state가 업데이트될 때 발생한다.
shouldComponentUpdate(nextProps, nextState)
React는 props 및 state가 변경될 때마다 render 함수를 실행하는 것을 기본으로 하고 있다. 이 메서드는 boolean을 return하는데 값에 따라 결과가 나뉜다.
- true일 때: 리렌더링
- false일 때: 리렌더링되지 않음 (render(), componentDidUpdate() 함수가 호출되지 않음)
값에 따라 리렌더링되지 않는 경우도 있기 때문에 성능최적화가 필요한 경우에 사용한다.
getSnapshotBeforeUpdate(prevProps, prevState)
가장 마지막으로 렌더링 된 결과가 DOM에 반영되었을 때 호출된다. 채팅화면의 Scroll 위치 조정할 때처럼 DOM 업데이트 이후 결정된 화면에 대한 조작이 필요할 때 사용한다. 여기서 return 되는 값은 componentDidUpdate의 세번째 인자로 전달된다.
componentDidUpdate(prevProps, prevState, snapshot)
최초 렌더링시에는 호출되지 않고, 업데이트가 일어난 직후에 발생하는 이벤트이다. DOM 조작이나 이전 props와 비교하여 네트워크 요청을 보낼지 결정하기에 좋은 위치이다.
언마운트
컴포넌트가 DOM에서 제거(UnMounting) 될 때 발생한다.
componentWillMount
컴포넌트가 DOM에서 제거되기 직전에 호출되는 이벤트이다. 여기서는 구독해제, 네트워크 요청 취소 등 메모리 누수 방지에 대한 처리를 진행한다.
Reference
React, State and Lifecycle, https://ko.legacy.reactjs.org/docs/state-and-lifecycle.html
veloport, LifeCycle Method, https://react.vlpt.us/basic/25-lifecycle.html
