[javascript] 리액트 훅에서 생명주기 메서드 사용 방법

22 Dec 2023

javascript

리액트 훅(React Hooks)은 함수 컴포넌트에서 상태와 다른 리액트 기능을 사용할 수 있도록 해줍니다. 클래스 컴포넌트의 생명주기 메서드를 훅에서 사용하는 방법에 대해 알아보겠습니다.

useEffect 훅을 사용한 생명주기 메서드 동작 구현

useEffect 훅을 사용하여 컴포넌트가 렌더링 될 때, 업데이트될 때, 혹은 사라질 때의 동작을 지정할 수 있습니다.

예를 들어, 클래스 컴포넌트의 componentDidMount와 componentWillUnmount 메서드에 해당하는 동작을 훅에서 다음과 같이 구현할 수 있습니다.

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // componentDidMount에 해당하는 동작
    // ...

    return () => {
      // componentWillUnmount에 해당하는 동작
      // ...
    };
  }, []); // 두 번째 매개변수에 빈 배열을 전달하여 컴포넌트가 마운트될 때 한 번만 실행되도록 설정
}

useState 훅을 사용한 생명주기 상태 관리

useState 훅을 사용하여 컴포넌트의 생명주기에 따른 상태를 관리할 수 있습니다.

예를 들어, 클래스 컴포넌트에서 componentDidMount 메서드에서 데이터를 가져와 상태를 업데이트하고 componentWillUnmount 메서드에서 정리할 때, 훅에서는 다음과 같이 구현할 수 있습니다.

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // componentDidMount에 해당하는 동작
    fetchData().then((result) => {
      setData(result);
    });

    return () => {
      // componentWillUnmount에 해당하는 동작
      cleanupData();
    };
  }, []);

  // fetchData, cleanupData 함수 정의
}

리액트 훅을 사용하여 클래스 컴포넌트의 생명주기 메서드와 상태를 효과적으로 관리할 수 있습니다.

참고 자료: