🔎 리액트 컴포넌트 생명주기

React Lifecycle Methods Diagram

컴포넌트는 생성(Mounting) → 업데이트(Updating) → 제거(Unmounting)의 생명주기를 갖고 있다.
즉, 컴포넌트가 화면에 나타나고, 업데이트되고, 사라지는 전체 과정을 말한다. 마치 사람의 탄생-성장-죽음과 비슷하다.

💡 Class Componet 생명주기

🌱 마운트 (Mount)

컴포넌트가 탄생하는 순간 즉, 화면에 처음 렌더링 되는 순간이다. 서버에서 데이터를 불러오는 작업이다.

☑️ constructor

컴포넌트가 생성될 때 가장 먼저 호출되는 메서드이다. this.props, this.state에 접근이 가능하고 리액트 요소를 반환합니다.

constructor(props) {
	super(props);
  	this.state = { username: '' };
  	this.handleChange = this.handleChange.bind(this);
  	// constructor 내부에서 setState를 호출하면 안된다.
}

☑️ getDerivedStateFromProps

constructor 다음에 호출되며 컴포넌트가 리렌더링되기 직전에도 호출된다. props로 받아온 값을 state에 동기화시키고 싶을 때 사용하며, 반환값으로 state를 업데이트할 객체를 반환하거나 null을 반환한다. static 메서드이므로 this를 사용할 수 없다.

static getDerivedStateFromProps(nextProps, prevState) {
	if (nextProps.username !== prevState.username) {
    	return { username: nextProps.username };
    }
  	return null;
}

☑️ render

클래스 컴포넌트에서 반드시 구현해야 하는 유일한 메서드이며, 컴포넌트의 UI를 정의하고 렌더링 한다.

☑️ componentDidMount

컴포넌트가 DOM에 마운트 된 직후에 호출된다. 주로 API 호출, DOM 조작, 이벤트 리스너 등록, 외부 라이브러리 연동 같은 작업들을 수행한다.

🌿 업데이트 (Update)

컴포넌트가 다시 렌더링 되는 순간 즉, 리렌더링될 때를 의미한다.

☑️ getDerivedStateFromProps

마운트 과정에서도 호출되었던 메서드로, 업데이트가 시작되기 전에도 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용한다.

☑️ shouldComponentUpdate

컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드이다. 성능 최적화를 위해 사용된다.

shouldComponentUpdate(nextProps, nextState) {
	// 현재 props, state와 다음 props, state를 비교
  	return this.props.value !== nextProps.value
  		|| this.state.value !== nextState.value;
}

기본값은 true이며 true를 반환하면 리렌더링을 진행하고 false를 반환하면 리렌더링을 중지한다.

☑️ componentDidUpdate

컴포넌트 업데이트가 끝난 직후 호출된다. 이전의 props나 state와 현재의 값을 비교해서 필요한 작업을 수행할 수 있다.

componentDidUpdate(prevProps, prevState) {
	// props가 변경되었을 때만 API 호출
  	if (this.props.userId !== prevProps.userId) {
    	this.fetchData(this.props.userId);
    }
}

DOM을 조작하거나 네트워크 요청을 보내는 등의 작업을 수행할 수 있으며, 이전 props와 state에 접근할 수 있다. setState를 호출할 수 있지만, 조건문으로 감싸지 않으면 무한 루프가 발생할 수 있으므로 주의해야 한다.

🍃 언마운트 (Unmount)

컴포넌트가 DOM에서 제거되는 과정을 의미한다. 컴포넌트가 화면에서 완전히 사라지기 직전에 수행되어야 하는 정리(clean-up) 작업들을 처리한다.

☑️ componentWillUnmount

컴포넌트가 화면에서 사라지기 직전에 호출되는 메서드로, 주로 컴포넌트에서 사용하던 리소스를 정리하는 작업을 수행한다.

💡 Functional Componet 생명주기

함수형 컴포넌트에서는 React Hooks, 특히 useEffect를 사용하여 생명주기를 관리한다.

🌱 마운트 (Mount)

☑️ 컴포넌트 함수 실행 & state 초기화

클래스의 constructor 역할을 대신하며, useState를 통해 상태를 초기화한다.

function Mount() {
  	const [username, setUsername] = useState('');

  	const handleChange = (e) => {
    	setUsername(e.target.value);
    };
}

☑️ 첫 렌더링 이후 작업

클래스의 componentDidMount 역할이며, useEffect의 두 번째 인자로 빈 배열([])을 전달하면 컴포넌트가 처음 마운트될 때만 실행된다.

useEffect(() => {
  	console.log('컴포넌트가 마운트되었습니다');
  	fetchData();
}, []);

🌿 업데이트 (Update)

☑️ 특정 값 변경 시 업데이트

useEffect의 의존성 배열에 특정 값을 넣으면 해당 값이 변경될 때마다 실행된다.

useEffect(() => {
  	document.title = username;
}, [username]);

🍃 언마운트 (Unmount)

☑️ 정리(Clean-up)

useEffect의 반환 함수를 통해 정리 작업을 수행한다. 클린업 함수는 컴포넌트가 언마운트되거나 새로운 effect가 실행되기 전에 실행되는 함수로, 이벤트 리스너 제거, 타이머 정리, 구독 해제 등 리소스를 정리하는 작업을 수행하여 메모리 누수를 방지한다.

useEffect(() => {
	const timer = setInterval(() => {
    	setCount(c => c + 1);
    }, 1000);
  
  	// 클린업 함수
  	return () => {
    	clearInterval(timer);
    };
}, []);