컴포넌트 기반의 리액트에서는 각 컴포넌트 마다 수명 주기가 있다. 컴포넌트가 브라우저 상에서 렌더링되고 업데이트되고 사라지는 과정을 말한다. 크게 마운트, 업데이트, 언마운트로 나뉜다.
라이프 사이클 메소드를 통해 우리는 컴포넌트가 생성되고 변화하고 없어지는 과정을 통제할 수 있다.
마운트(Mount)
컴포넌트가 처음 생성되는 단계. DOM이 생성되고 웹 브라우저 상에 나타난다.
다음과 같은 메소드가 호출된다.
constructor
생성자 메소드. 가장 먼저 실행된다.
constructor(props) {
super(props);
this.state = { count: 0 };
}props과 state에 접근할 수 있고, 초기 state 값을 정할 수 있다.
함수형 컴포넌트에서는 useState 훅을 통해 state의 초기값을 설정할 수 있다.
getDerivedStateFromProps
props으로 받은 값을 state 값으로 설정하고 싶을 때 사용된다.
static getDerivedStateFromProps(props, state) {
return {
if (조건문) return { // state }
return null
}
}
최초 마운트 그리고 업데이트될 때, render 메소드를 호출하기 직전에 호출된다.
메소드 내에서 갱신할 state 값을 리턴하거나, null을 리턴하여 갱신하지 않을 수 있다.
render
컴포넌트를 렌더링한다. 클래스 컴포넌트에서 반드시 구현되어야 하는 유일한 메소드이다.
class Example extends React.Component {
render() {
return <div>example</div>
}
}
메소드는 같은 input에 대해 output이 나와야 한다(순수함수).
componentDidMount
render 내에 모든 부분들이 브라우저에 나타나면 실행된다. 첫 렌더링이 마쳐진 후 한번만 실행된다.
DOM을 직접 조작할 수 있다. DOM에 직접 접근해야 하는 외부 라이브러리를 연동하거나 DOM을 읽거나 변경하는 작업을 할 수 있다.
주로 필요한 데이터를 요청하는 작업을 한다.
class Example extends Component {
state = {
users: [],
};
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((users) => this.setState({ users }));
}
함수형 컴포넌트에서는 useEffect를 빈 의존성 배열([])과 함께 사용해서 같은 기능을 구현할 수 있다.
업데이트(Update)
다음과 같은 상황에서 업데이트가 발생한다.
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링될 때
- this.forceUpdate로 강제로 렌더링이 trigger될 때
getDerivedStateFromProps
마운트 시에도 사용되는, 값이 갱신되었을 때 state 값을 변경할 수 있는 메소드 (위 참조)
shouldComponentUpdate
props나 state가 변경되었을 때 리렌더링을 할지 결정하는 메소드이다. boolean 값을 리턴하여, true이면 render 메소드가 호출된다. 함수형 컴포넌트에서 React.memo, useMemo 훅을 사용하듯이, 불필요한 렌더링을 방지하여 성능을 개선할 수 있다.
shouldComponentUpdate(nextProps, nextState) {
if (조건) return false;
return true;
}
render
렌더링
getSnapshotBeforeUpdate
렌더링된 결과가 DOM에 반영되기 전에 호출된다. 변경되기 전 스냅샷(props, state)를 인자로 받아서 사용할 수 있고, 리턴한 값은 componentDidUpdate에서 받아서 사용될 수 있다.
class Example extends React.Component {
getSnapshotBeforeUpdate(prevProps, prevState) {
return { ... }
}
}
componentDidUpdate
리렌더링 완료(DOM 변화 발생) 후 실행된다.
이전 state, props 값과 현재 값을 비교해서 데이터를 새롭게 불러오는 작업 등을 할 수 있다.
componentDidUpdate(prevProps, prevState) {
if (this.props.userId !== prevProps.userId) {
this.fetchData(this.props.userId);
}
}언마운트(Unmount)
DOM에서 컴포넌트가 제거된다.
componentWillUnmount
주로 타이머나 이벤트를 제거할 때 사용된다.
함수형 컴포넌트에서는 useEffect의 cleanup 함수로 같은 기능을 구현할 수 있다.
참고
https://velog.io/@remon/React-리액트-라이프-사이클