230914 React LifeCycle

📌 React의 컴포넌트 라이프사이클은 컴포넌트가 생성되고 업데이트되며 제거되는 과정을 효과적으로 관리하고 제어하는 데 사용된다. React 컴포넌트의 라이프사이클은 세 가지 주요 단계로 나눌 수 있다.

1. 마운드(Mounting)

• constructor : 컴포넌트가 생성될 때 가장 먼저 실행되는 메서드이다. 초기 상태를 설정하거나 다른 초기 설정 작업을 수행한다.

• getDerivedStateFromProps : props가 변경될 때 호출된다. 이 메서드를 사용하여 변경된 props를 기반으로 state를 업데이트 할 수 있다.

• render : 컴포넌트를 화면에 그리는 메서드이다. 이 메서드는 반드시 구현되어야 한다.

• componentDidMount : 컴포넌트가 화면에 처음으로 랜더링된 후 호출된다. 주로 초기 데이터의 로딩, 외부 API 호출, 이벤트 리스너 등을 설정하는 데 사용된다.

2. 업데이트(Updating)

• getDerivedStateFromProps : 마운트 단계와 마찬가지로 props 변경 시 호출되며, 상태를 업데이트 하는 데 사용할 수 있다.

• shouldComponentUpdate : 컴포넌트가 업데이트를 진행해야 할 지 여부를 경정하는 메서드이다. 성능 최적화를 위해 사용되며 기본적으로 true를 반환한다.

• render : 업데이트를 수행하고 컴포넌트를 다시 랜더링한다.

• getSnapshotBeforeUpdate : 실제 DOM 업데이트 전에 호출되며 주로 이전 상태와 현재 상태를 비교하여 스크롤 위치 등을 저장하는 데 사용된다.

3. 언마운트(Unmounting)

• componentWillUnmount : 컴포넌트가 제거되기 전에 호출된다. 주로 이벤트 리스너 해제, 타이머 제거 등 리소스 해제 작업을 수행하는 데 사용된다.

📌 한편, 함수형 컴포넌트의 경우 React Hook을 사용하면 상태(state) 관리와 라이프사이클 관리를 할 수 있다. 상태와 라이프사이클을 관리할 수 있는 대표적인 Hook으로는 useState 와 useEffect 가 있다.

1. useState

useState : 함수형 컴포넌트에서 상태를 관리하는 데 사용되며, 현재 상태와 상태를 업데이트하는 함수를 반환한다.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

2. useEffect

useEffect : 함수형 컴포넌트의 라이프사이클 관리와 비동기 작업 처리에 사용된다. useEffect를 사용하면 컴포넌트가 마운트될 때, 업데이트될 때, 언마운트될 때 특정 동작을 수행할 수 있다.

1. 컴포넌트가 마운트 된 후 실행되는 로직은 훅의 콜백 함수 내부에 작성한다.

   useEffect(() => {
     // 마운트 시 실행되는 코드
   }, []);
   

2. 특정 상태 또는 props가 변경될 때 실행되는 로직은 훅의 두번째 매개변수인 의존성 배열에 작성한다.

   useEffect(() => {
     // 특정 상태 또는 props가 변경될 때 실행되는 코드
   }, [dependency]);
   

3. 컴포넌트가 언마운트될 때 실행되는 로직은 훅의 콜백 함수에서 반환하는 함수로 작성한다. 이는 cleanup 함수라 칭한다.

   useEffect(() => {
     return () => {
       // 언마운트 시 실행되는 코드
     };
   }, []);
   

📌 이처럼 함수형 컴포넌트의 경우 React Hook을 사용하면 상태와 라이프사이클을 효과적으로 관리할 수 있다. 이로 인해 코드는 간결해지고 이해하기 쉬워지며 성능과 유지보수성을 향상시킬 수 있다.