리액트 컴포넌트의 라이프사이클
1. 마운팅 (Mounting)
마운팅은 컴포넌트 인스턴스가 생성되어 DOM에 삽입될 때 발생하는 단계
constructor: 컴포넌트가 생성될 때 가장 처음으로 실행되는 메서드
static getDerivedStateFromProps: props로 받아온 값을 state에 동기화시켜주는 메서드
render: UI를 만들어내는 함수로, JSX를 반환
componentDidMount: 이 메서드는 첫 렌더링 후에 호출되며, 주로 네트워크 요청 등 비동기 작업을 처리하는 곳에서 사용
2. 업데이팅 (Updating)
업데이팅 단계는 props 혹은 state가 변경되었을 때 발생
static getDerivedStateFromProps
shouldComponentUpdate: 이 메서드를 통해 특정 조건 하에서 렌더링을 방지하여 성능 최적화를 할 수 있다.
render
getSnapshotBeforeUpdate: render 결과가 DOM에 반영되기 직전에 호출된다.
componentDidUpdate: 업데이트 작업 완료 후 호출된다.
3. 언마운팅 (Unmounting)
언마운팅 단계는 컴포넌트가 DOM에서 제거될 때 발생
componentWillUnmount: 이 메서드는 주로 타임아웃 해제, 외부 라이브러리 인스턴스 제거 등 컴포넌트와 관련된 정리 작업을 수행한다.
하지만, 최근에는 함수형 컴포넌트와 Hooks를 사용하여 라이프사이클을 관리하는 방식이 인기를 얻고 있다.
특히 useEffect Hook은 componentDidMount, componentDidUpdate, componentWillUnmount의 기능을 모두 합쳐놓은 것과 같다.(useEffect Hook은 생명주기 메서드의 역할을 대체할 수 있다.)
useEffect Hook와 생명주기 메서드
componentDidMount, componentDidUpdate, 그리고 componentWillUnmount와 같은 생명주기 함수들을 한 곳에서 처리할 수 있게 해준다.
import React, { useState, useEffect } from 'react';
function Example() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com');
const data = await response.json();
setData(data);
};
fetchData();
// 클린업 함수
return () => {
// 필요한 클린업 로직을 작성
};
}, []); // 빈 배열은 componentDidMount와 같이 한 번만 실행되게 한다.
return (
<div>
{/* 데이터 렌더링 */}
</div>
);
}useEffect를 사용하여 데이터를 가져오는 로직과 클린업 로직을 한 곳에서 관리하는 방법이다. Hooks를 이용한 방식은 코드가 간결해지고 가독성이 좋아진다. 또한 재사용성도 용이하여 개발 과정이 단순화되는 장점이 있다.
