React 라이프사이클 (함수 컴포넌트, 클래스 컴포넌트)

---

1. React 라이프 사이클

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

 

리액트 v16.3 이전에는 클래스 컴포넌트의 라이프사이클이 메서드로 주로 다뤄졌지만, v16.3 이후부터는 함수 컴포넌트에서도 라이프사이클에 대한 기능이 Hooks를 통해 도입되었다.

 

2. 함수 컴포넌트

함수형 컴포넌트는 리액트의 함수 컴포넌트 기능과 Hooks를 활용하여 UI를 구성하는 방식이다.

 

2.1. 함수컴포넌트 예시코드

      

      

      

    
    

      <javascript />
    
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>
  );
}

클래스 컴포넌트에 비해 간결한 코드인 것을 확인할 수 있다.

 

2.2. 함수컴포넌트 특징

• 간결성 : 클래스 컴포넌트에 비해 코드가 간경하고, 순수한 JavaScript 함수로 컴포넌트를 정의할 수 있다.
• Hooks : 'useState', 'useEffect', 'useContext' 등의 Hooks를 이용하여 라이프사이클과 관련된 컴포넌트를 정의할수 있다.
• 상태관리 : 'useState' 를 사용하여 컴포넌트 내부에서 상태를 간단히 관리할수 있다.
• 높은 재사용성 : 함수형 프로그래밍 원칙을 따르며 컴포넌트를 작성하기 때문에 재사용성이 높아진다.
• 클래스 문제해결 : 클래스컴포넌트에서 발생하는 'this' 바인딩 문제와 메모리 누수 문제를 해결한다.

 

 

3. 클래스 컴포넌트

오랫동안 사용되어온 컴포넌트 유형이다. 

 

3.1. 클래스컴포넌트 예시코드

      

      

      

    
    

      <javascript />
    
import React, { Component } from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

 

3.2. 클래스 컴포넌트 특징

• 상태와 라이프사이클 : 'state'와 라이프사이클 메서드를 활용하여 컴포넌트의 상태관리와 라이프사이클 이벤트 처리가 가능하다.
• Class 문법 : ES6 클래스문법을 사용하여 컴포넌트를 정의한다.
• Legacy코드 : Hooks 도입 이전의 리액트 코드에 사용되던 방식으로, 새로운프로젝트에서는 함수 컴포넌트와 Hooks를 사용하는 것이 권장된다. 

 

 

4. (클래스형) 컴포넌트 메소드 

메소드들은 컴포넌트의 생명주기 동안 다양한 시점에서 실행되어 특정 작업을 수행하거나 상태를 관리하는데 사용된다.

 

일반적으로 React라이프사이클 메소드는 세 가지 카테고리로 분류된다.

 

4.1. Mounting (생성 단계)

• constructor() : 컴포넌트가 생성될 때 호출되는 생성자 함수입니다.
• static getDerivedStateFromProps(props, state) : props에 변화가 있을 때마다 호출되며, 새로운 state를 반환할 수 있습니다.
• render() : 컴포넌트의 UI를 렌더링하는 메서드입니다.
• componentDidMount() : 컴포넌트가 화면에 나타난 후 호출되는 메서드로, 네트워크 요청이나 초기화 작업 등을 처리하는 데 사용됩니다.

 

4.2. Updating (갱신 단계)

• static getDerivedStateFromProps(props, state): 마운팅 단계와 마찬가지로 props의 변화에 따라 state를 업데이트할 수 있습니다.
• shouldComponentUpdate(nextProps, nextState) : 컴포넌트가 업데이트 되어야 하는지 여부를 결정하는 메서드로, 성능 최적화에 활용됩니다.
• render() : UI를 갱신합니다.
• getSnapshotBeforeUpdate(prevProps, prevState) : 실제 DOM에 업데이트가 반영되기 직전에 호출되며, 스크롤 위치와 같은 정보를 얻을 수 있습니다.
• componentDidUpdate(prevProps, prevState, snapshot) : 갱신이 완료된 후 호출되는 메서드로, 업데이트 후 작업을 처리하는 데 사용됩니다.

 

4.3. Unmounting (소멸 단계)

• componentWillUnmount() : 컴포넌트가 제거되기 직전에 호출되는 메서드로, 리소스 해제나 이벤트 리스너 등을 정리하는 데 사용됩니다.

 

5. Hook을 이용하여 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는방법

결론부터 말하자면 함수형 컴포넌트 (Hook) 에서 클래스형 컴포넌트의 라이프사이클 메소드를 이용하려면 useEffect라는 메소드를 사용하면 된다. 

 

      

      

      

    
    

      <javascript />
    
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // componentDidMount 및 componentDidUpdate 로직
    // ...

    return () => {
      // componentWillUnmount 로직
      // ...
    };
  }, []); // []를 전달하여 componentDidMount 처럼 한 번만 실행하도록 설정합니다.

  return (
    // JSX 반환
  );
}

 

 

5.1. 결론

React에서 라이프사이클은 컴포넌트가 생성되고 업데이트 되고 소멸되는 과정을 말한다. 

 

그 중 클래스형과 함수형 으로 라이프사이클을 관리할 수 있는데, 이전에는 클래스형을 많이 이용했고, 최근에는 Hook을 이용한 함수형 컴포넌트를 권장한다. 

 

클래스형 메소드인 ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount 등은 함수형 메소드인 useEffect를 이용하여 여러가지 라이프사이클 동작을 수행할 수 있다.