컴포넌트 생명주기
React의 생명주기 메서드는 컴포넌트가 생성, 업데이트 및 제거되는 과정을 관리하고 제어하기 위해 사용되는 메서드이다.
모든 컴포넌트는 여러 종류의 '생명주기 메서드'를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다.
ℹ️ 컴포넌트(Component)란?
리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있습니다.
컴포넌트의 생명주기는 크게 3단계로 나누어진다.
- Mounting(생성)
- Updating(업데이트)
- Unmounting(제거)
생명주기 도표를 참고하자.
Mounting
아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때 순서대로 호출된다.
constructor()static getDerivedStateFromProps()(설명 생략)render()componentDidMount()
constructor()
constructor(props)
constructor()함수는 컴포넌트가 실행될 때 가장 먼저 호출되는 함수이다.
React 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출됩니다.
state를 정의하거나 state에 초기값을 넣고 싶을 때 이 함수 안에 작성하면 된다.
➡️ 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자(constructor)를 구현하지 않아도 된다.
함수 내부에 super(props)를 먼저 호출해야한다. this.props가 생성자 내에서 정의되지 않아 버그로 이어질 수 있다.
React에서 생성자의 목적
this.state에 객체를 할당하여 지역 state를 초기화- 인스턴스에 이벤트 처리 메서드를 바인딩
constructor(props) {
super(props);
// 여기서 this.setState()를 호출하면 안 됩니다!
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
생성자는 this.state를 직접 할당할 수 있는 유일한 곳이다. 그 외의 메서드에서는 this.setState()를 사용해야 한다.
render()
render()render() 메서드는 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드입니다.
render()함수는 반드시 작성해야 합니다.
render() 함수는 이 함수 내부에서 작성한 HTML 태그들로 DOM을 형성한다.(JSX는 자바스크립토 컴파일되어 HTML 태그로 변경되어 DOM을 형성한다.)
componentDidMount()
componentDidMount()
componentDidMount()함수는 컴포넌트가 렌더(render)된 후에 실행되는 함수이다. 즉,render()함수가 실행되어 JSX 태그들이 DOM을 형성한 이후에 이 함수가 호출된다. 그래서 이 함수에는 DOM이 형성된 이후에 해야할 작업을 작성한다. 보통 Database에서 데이터를 불러올 때 사용한다.
Updating
Updating은 Mounting 과정을 거쳐 DOM을 형성한 컴포넌트에 state 값이나 props 값을 변경할 때 발생한다.
static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
render()
render()는 Updating 단계에서도 실행된다. 왜냐하면 변경된 state 값 혹은 props 값을 다시 DOM에 나타내야 하기 때문이다.
componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate()함수는 컴포넌트가 DOM에 업데이트 된 이후에 호출되는 함수이다.
componentDidUpdate()는 갱신이 일어난 직후에 호출됩니다. 이 메서드는 최초 렌더링에서는 호출되지 않습니다.
컴포넌트가 갱신되었을 때 DOM을 조작하기 위하여 이 메서드를 활용하면 좋다.
또한, 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업에도 이 메서드에서 이루어지면 된다.
componentDidUpdate(prevProps) {
// 전형적인 사용 사례 (props 비교를 잊지 마세요)
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}Unmounting
아래 메서드는 컴포넌트가 DOM 상에서 제거될 때 호출된다.
componentWillUnmount()
componentWillUnmount()
componentWillUnmount()
componentWillUnmount()는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출됩니다. 이 메서드 내에서 타이머 제거, 네트워크 요청 취소,componentDidMount()내에서 생성된 구독 해제 등 필요한 모든 정리 작업을 수행하세요.
지금까지 컴포넌트 생명주기와 생명주기 메서드에 관해 설명했다.
위에서 설명한 생명주기 메서드는 모두 클래스형 컴포넌트 생명주기 메서드이다.
함수형 컴포넌트에서는 useEffect 훅을 사영하여 생명주기를 관리한다.
