해당글은 React의 함수형 컴포넌트 생명주기(lifeCycle)에 대하여 설명하고 있습니다.
생명주기
리액트는 컴포넌트단위로 생성되는데, 이 컴포넌트들은 생명주기를 갖고있다. 생성부터 시작하여 업데이트, 소멸 되는 과정을 라이프사이클 이라고 한다.
생명주기의 단계는
생성(mounting) - 업데이트(updating) - 제거(unmounting)
각각의 생명주기마다 이벤트 발생 횟수가 다르다. (생성, 제거 한번, 업데이트 여러번 실행)
으로 구성되어 있으며, 각 단계마다 특정한 이벤트가 발생하며 그 때마다 사용되는 메서드가 존재합니다.

[출처] https://wavez.github.io/react-hooks-lifecycle/
전체적인 과정을 살펴보자면
- 컴포넌트 내부 Mounting
컴포넌트가 호출 되었을 때, 가장 먼저 컴포넌트 내부에서 Mounting을 한다. - 컴포넌트 return 실행
컴포넌트에서 return이 실행된다. - useEffect Mounting
렌더링 이후 실행된다. - useEffect Updating
컴포넌트 내부의 값이 업데이트 될 때 실행된다. - useEffect Unmounting
컴포넌트가 페이지에서 사라질 때 실행된다.
import React, { useState } from 'react';
function FunctionalComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
// 출처: https://strap.tistory.com/entry/React-라이프사이클-함수-컴포넌트-클래스-컴포넌트#article-2--함수-컴포넌트 [공삼:티스토리]
함수형 컴포넌트의 특징
- 간결성 : 클래스 컴포넌트에 비해 코드가 간결하고, 순수 JavaScript 함수로 컴포넌트를 정의할 수 있다.
- Hooks : useState, useEffect, useContext 등의 Hooks를 사용하여 라이프사이클과 관련된 컴포넌트를 정의할 수 있다.
- 상태관리 : useState를 사용하여 컴포넌트 내부에서 간단히 상태관리를 할 수 있다.
- 재사용성 : 함수형 프로그래밍 원칙을 따르며, 비슷한 양식의 컴포넌트를 작성하여 재사용이 가능하기 때문에 재사용성이 높아진다.
- 클래스 문제 해결 : 클래스 컴포넌트에서 발생하는 this 바인딩 문제와 메모리 누수 문제를 해결한다.