React의 State와 Lifecycle

React의 상태(state)와 생명주기(lifecycle)는 React에서 컴포넌트 기반으로 애플리케이션을 구축할 때 중요한 개념입니다. 각각의 개념을 살펴보면 다음과 같습니다.

1. 상태 (State)

State는 React 컴포넌트가 유지하는 동적인 데이터입니다. 컴포넌트 내부에서 관리되며, 시간이 지남에 따라 변경될 수 있는 데이터를 나타냅니다. State는 UI의 일부분을 변경하거나 다시 렌더링해야 할 때 매우 중요한 역할을 합니다.

상태의 특징:

• 내부적으로 관리: 각 컴포넌트는 자신만의 상태를 관리합니다. 부모 컴포넌트나 다른 컴포넌트는 직접적으로 다른 컴포넌트의 상태를 접근할 수 없습니다. 하지만 props로 데이터를 전달받을 수 있습니다.
• 변경 가능: state는 동적으로 변할 수 있지만, 직접적으로 값을 수정할 수 없습니다. 대신, setState라는 메서드를 사용해서만 변경해야 합니다.
• 렌더링과 연관: 상태가 변경되면 컴포넌트는 다시 렌더링됩니다. React는 상태 변경을 감지하고, 이를 기반으로 UI를 업데이트합니다.

상태를 설정하는 방법:

import React, { useState } from 'react';
 
function Counter() {
  
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
}

• useState(0)은 상태의 초기값을 0으로 설정하고, setCount 함수는 상태를 업데이트하는 데 사용됩니다.

2. 생명주기 (Life Cycle)

생명주기는 컴포넌트가 생성되고 업데이트되고, 제거되는 과정에서 특정 시점에 실행되는 메서드를 나타냅니다. React에서는 함수형 컴포넌트와 클래스형 컴포넌트에서 생명주기를 처리하는 방식이 다릅니다.

2-1. 클래스형 컴포넌트의 생명주기

클래스형 컴포넌트는 기본적으로 다음 세 가지 주요 단계로 구분됩니다.

1. 마운트 (Mounting): 컴포넌트가 DOM에 삽입될 때 발생하는 과정.
2. 업데이트 (Updating): 상태나 props가 변경되어 컴포넌트가 다시 렌더링될 때 발생하는 과정.
3. 언마운트 (Unmounting): 컴포넌트가 DOM에서 제거될 때 발생하는 과정.

생명주기 메서드:

• constructor(): 컴포넌트가 생성될 때 호출되며, 상태를 초기화하거나 메서드를 바인딩할 때 주로 사용됩니다.
• componentDidMount(): 컴포넌트가 처음 화면에 렌더링된 후 호출됩니다. 보통 데이터를 가져오거나 외부 리소스를 초기화할 때 사용됩니다.
• componentDidUpdate(prevProps, prevState): 컴포넌트가 업데이트된 후 호출됩니다. 상태나 props가 변경된 이후에 특정 동작을 하고자 할 때 유용합니다.
• componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다. 리소스를 정리하거나 타이머를 해제하는 등의 작업을 수행합니다.

클래스형 컴포넌트 예시:

import React, { Component } from 'react';
 
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
 
  componentDidMount() {
    console.log('컴포넌트가 마운트되었습니다.');
  }
 
  componentDidUpdate(prevProps, prevState) {
    console.log('컴포넌트가 업데이트되었습니다.');
  }
 
  componentWillUnmount() {
    console.log('컴포넌트가 언마운트됩니다.');
  }
 
  render() {
    return (
      <div>
        <p>현재 카운트: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          카운트 증가
        </button>
      </div>
    );
  }
}

2-2. 함수형 컴포넌트와 Hooks의 생명주기

함수형 컴포넌트에서는 Hooks를 사용해 생명주기를 관리합니다. 특히 useEffect는 컴포넌트의 생명주기 동안 특정 작업을 수행할 수 있게 해줍니다.

useEffect의 동작 방식:

• useEffect는 기본적으로 컴포넌트가 렌더링된 후 실행됩니다. 즉, componentDidMount와 componentDidUpdate 역할을 수행할 수 있습니다.
• useEffect는 두 번째 인자로 의존성 배열을 받습니다. 이 배열에 있는 값이 변경될 때만 useEffect가 실행됩니다.
• useEffect에서 반환하는 함수는 클린업 함수로, 컴포넌트가 언마운트될 때나 업데이트되기 직전에 실행됩니다.

useEffect 예시:

import React, { useState, useEffect } from 'react';
 
function MyComponent() {
  const [count, setCount] = useState(0);
 
  
  useEffect(() => {
    console.log('컴포넌트가 렌더링되었거나 count가 변경되었습니다.');
 
    
    return () => {
      console.log('컴포넌트가 언마운트되거나 업데이트 직전입니다.');
    };
  }, [count]); 
 
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
}

요약

React의 State: 컴포넌트 내부에서 관리되는 동적인 데이터.

Lifecycle: 컴포넌트가 생성, 업데이트, 제거되는 과정에서 특정 시점에 실행되는 메서드나 함수. 함수형 컴포넌트에서는 useEffect를 통해 생명주기와 유사한 기능을 관리.