[React] 리액트 생명주기(lifeCycle)에 대하여

해당글은 React의 함수형 컴포넌트 생명주기(lifeCycle)에 대하여 설명하고 있습니다.

생명주기

리액트는 컴포넌트단위로 생성되는데, 이 컴포넌트들은 생명주기를 갖고있다. 생성부터 시작하여 업데이트, 소멸 되는 과정을 라이프사이클 이라고 한다.

생명주기의 단계는

생성(mounting) - 업데이트(updating) - 제거(unmounting)
각각의 생명주기마다 이벤트 발생 횟수가 다르다. (생성, 제거 한번, 업데이트 여러번 실행)

 

으로 구성되어 있으며, 각 단계마다 특정한 이벤트가 발생하며 그 때마다 사용되는 메서드가 존재합니다.

[출처] https://wavez.github.io/react-hooks-lifecycle/

전체적인 과정을 살펴보자면

1. 컴포넌트 내부 Mounting
   컴포넌트가 호출 되었을 때, 가장 먼저 컴포넌트 내부에서 Mounting을 한다.
2. 컴포넌트 return 실행
   컴포넌트에서 return이 실행된다.
3. useEffect Mounting
   렌더링 이후 실행된다.
4. useEffect Updating
   컴포넌트 내부의 값이 업데이트 될 때 실행된다.
5. 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 바인딩 문제와 메모리 누수 문제를 해결한다.