React 컴포넌트의 생명주기(Lifecycle)

React 컴포넌트의 생명주기(Lifecycle)는 컴포넌트가 생성되고 업데이트되며 소멸될 때의 단계를 말합니다.

React의 클래스 컴포넌트에서 사용되는 주요한 생명주기 메서드는 다음과 같습니다

• componentDidMount: 컴포넌트가 화면에 처음 렌더링된 후에 실행되는 메서드입니다. 주로 초기 데이터 로딩, 외부 라이브러리 초기화, 이벤트 리스너 등을 설정하는데 사용됩니다.
• componentDidUpdate: 컴포넌트의 상태(state)나 속성(props)이 업데이트되고, 리렌더링이 발생한 후에 실행되는 메서드입니다. 업데이트 이후에 필요한 작업을 처리할 수 있습니다.
• componentWillUnmount: 컴포넌트가 화면에서 제거되기 전에 실행되는 메서드입니다. 주로 이벤트 리스너 해제, 타이머 제거 등의 정리 작업을 수행합니다.

컴포넌트 생명주기를 따름으로 얻을 수 있는 장점은?

1. 컴포넌트 초기화 및 정리:
   생명주기 메서드를 사용하여 컴포넌트의 초기화 및 정리 작업을 수행할 수 있습니다. 예를 들어, componentDidMount 메서드를 활용하여 컴포넌트가 처음으로 화면에 렌더링되기 전에 필요한 설정 작업을 할 수 있습니다. 이를 통해 초기 데이터 로딩, 외부 라이브러리 초기화 등의 작업을 수행할 수 있습니다. 마찬가지로, componentWillUnmount 메서드를 사용하여 컴포넌트가 화면에서 제거되기 전에 리소스 해제 또는 이벤트 리스너 등의 정리 작업을 수행할 수 있습니다.

2. 상태 및 속성 변화에 대한 대응:
   생명주기 메서드를 사용하여 컴포넌트의 상태(state) 또는 속성(props)이 변경될 때 필요한 작업을 수행할 수 있습니다. componentDidUpdate 메서드를 활용하여 상태 또는 속성의 변화를 감지하고 필요한 동작을 수행할 수 있습니다. 예를 들어, 상태가 변경되면 API 호출을 수행하거나 다른 컴포넌트에 이벤트를 발생시킬 수 있습니다. 이를 통해 컴포넌트의 상태 변화에 따른 동적인 업데이트를 처리할 수 있습니다.

3. 외부 라이브러리 통합: 생명주기 메서드를 사용하여 외부 라이브러리와의 통합을 수행할 수 있습니다. 예를 들어, componentDidMount 메서드를 사용하여 외부 라이브러리의 초기화 작업을 처리할 수 있습니다. 또한, componentWillUnmount 메서드를 사용하여 외부 라이브러리의 해제 작업을 수행할 수 있습니다.

4. 비동기 작업 관리: 생명주기 메서드를 활용하여 비동기 작업을 처리할 수 있습니다. 예를 들어, componentDidMount 메서드를 사용하여 데이터 로딩이나 API 호출과 같은 비동기 작업을 수행할 수 있습니다. 이를 통해 데이터를 가져와 컴포넌트의 상태를 업데이트하거나, 필요한 경우 다른 컴포넌트에 데이터를 전달할 수 있습니다.

5. 성능 최적화: 생명주기 메서드를 적절하게 활용하여 컴포넌트의 성능을 최적화할 수 있습니다. 예를 들어, shouldComponentUpdate 메서드를 사용하여 불필요한 리렌더링을 방지할 수 있습니다.

함수형 컴포넌트에서 생명주기와 관련된 작업을 처리하기 위해 사용되는 훅: useEffect

useEffect 훅은 첫 번째 매개변수로 실행할 함수를 받고, 두 번째 매개변수로 의존성 배열(dependency array)을 받습니다. 의존성 배열은 useEffect 훅이 의존하는 상태나 속성의 배열입니다. 의존성 배열을 사용하여 특정 상태나 속성이 변경되었을 때에만 useEffect 훅이 실행되도록 설정할 수 있습니다.

아래는 클래스 컴포넌트와 함수형 컴포넌트에서 생명주기와 useEffect를 사용하는 예시 코드입니다.

클래스 컴포넌트에서의 생명주기 예시:

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    console.log('컴포넌트가 마운트되었습니다.');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('컴포넌트가 업데이트되었습니다.');
  }

  componentWillUnmount() {
    console.log('컴포넌트가 언마운트되었습니다.');
  }

  render() {
    return <div>안녕하세요!</div>;
  }
}

위의 코드에서 componentDidMount, componentDidUpdate, componentWillUnmount는 클래스 컴포넌트의 생명주기 메서드입니다. 각각 컴포넌트가 마운트되었을 때, 업데이트되었을 때, 언마운트되었을 때 실행됩니다.

아래는 MyComponent 클래스를 사용하는 예시 코드입니다:

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  const [showComponent, setShowComponent] = React.useState(true);

  const toggleComponent = () => {
    setShowComponent(!showComponent);
  };

  return (
    <div>
      <button onClick={toggleComponent}>컴포넌트 토글</button>
      {showComponent && <MyComponent />}
    </div>
  );
}

export default App;

위의 예시 코드에서는 MyComponent를 형태로 JSX 내에서 사용하고 있습니다. App 컴포넌트에서는 버튼을 클릭하여 showComponent 상태를 토글함으로써 MyComponent가 렌더링되거나 언마운트될 수 있도록 구현되어 있습니다.

이때, MyComponent의 라이프사이클 메서드가 동작하게 됩니다. 컴포넌트가 마운트되면 componentDidMount가 호출되어 "컴포넌트가 마운트되었습니다."라는 메시지가 콘솔에 출력됩니다. 그 후, App 컴포넌트의 상태가 변경되어 MyComponent가 업데이트될 때는 componentDidUpdate가 호출되어 "컴포넌트가 업데이트되었습니다."라는 메시지가 콘솔에 출력됩니다. 마지막으로, MyComponent가 언마운트되면 componentWillUnmount가 호출되어 "컴포넌트가 언마운트되었습니다."라는 메시지가 콘솔에 출력됩니다.

함수형 컴포넌트에서의 useEffect 예시:

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    console.log('컴포넌트가 마운트되었습니다.');

    return () => {
      console.log('컴포넌트가 언마운트되었습니다.');
    };
  }, []);

  useEffect(() => {
    console.log('컴포넌트가 업데이트되었습니다.');
  });

  return <div>안녕하세요!</div>;
};

의존성 배열이 빈 배열([])로 지정되었기 때문에 마운트와 언마운트 시에만 실행됩니다. 두 번째 useEffect에서는 컴포넌트가 업데이트될 때마다 실행되는 함수를 정의하고 있습니다. 의존성 배열이 지정되지 않았기 때문에 모든 업데이트 시에 실행됩니다.