React의 생애주기(lifecycle), 클래스형, 함수형, React Hook

생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 갖는다

클래스형 컴포넌트에서의 생애주기별 메서드

Mounting (생성 단계)

constructor: 컴포넌트가 생성될 때 호출되는 생성자 메소드. 초기화 작업을 수행한다.
render: UI를 렌더링하는 메서드
componentDidMount: 컴포넌트가 DOM에 삽입된 직후에 호출된다. 초기 데이터 로딩 및 외부 리소스 초기화에 유용하다.

Updating (업데이트 단계)

shouldComponentUpdate: 컴포넌트가 업데이트되어야 하는지 여부를 결정하는 메서드. 성능 최적화에 활용된다.
render: UI를 다시 렌더링
componentDidUpdate: 컴포넌트가 업데이트된 직후에 호출된다. 업데이트 이후의 작업을 수행한다.

Unmounting (제거 단계)

componentWillUnmount: 컴포넌트가 제거되기 전에 호출됩니다. 리소스 정리와 타이머 해제와 같은 정리 작업을 수행합니다.

Error Handling (에러 처리 단계)

componentDidCatch: 자식 컴포넌트에서 발생한 에러를 처리하기 위해 사용됩니다. 에러 경계(error boundary)를 정의하고 에러 처리 로직을 구현할 때 활용됩니다.

함수형 컴포넌트의 생명주기

리액트에서 Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수이다.
즉 Hook은 class 안에서는 동작하지 않고, class없이 React를 사용할 수 있게 한다.

대표적으로 useEffect 훅을 class형 컴포넌트의 메서드와 비교해보자면

• componentDidMount (클래스형 컴포넌트): 컴포넌트가 마운트된 직후에 호출된다.

  useEffect(() => {
     // componentDidMount 로직을 여기에 작성
  }, []);
  

• componentDidUpdate (클래스형 컴포넌트): 컴포넌트의 상태나 속성이 변경될 때 호출된다.

  useEffect(() => {
  	// componentDidUpdate 로직을 여기에 작성
  }, [dependency1, dependency2]);
  

• componentWillUnmount (클래스형 컴포넌트): 컴포넌트가 언마운트되기 전에 호출된다.

  useEffect(() => {
    return () => {
      // componentWillUnmount 로직을 여기에 작성
    };
  }, []);

  이러한 방식으로 React Hook을 사용하면 함수형 컴포넌트에서 클래스형 컴포넌트와 유사한 라이프사이클 동작을 구현할 수 있습니다.

  
  
  

---

lifecycle-of-reactive-effects
[React.js] 리액트 라이프사이클(life cycle) 순서, 역할, Hook
[React] Lifecycle, React Hooks(클래스형,함수형)