[React] State and Lifecycle : 리액트 컴포넌트의 관리

1. State(상태)

리액트에서 State는 컴포넌트 내에서 동적으로 변할 수 있는 데이터입니다. 이 값들은 렌더링이나 데이터 흐름에 사용되며, 컴포넌트의 UI를 제어합니다.

 

State의 특징

• 변경 가능 : State는 시간이 지남에 따라 변경될 수 있는 값입니다. 예를 들어 사용자 입력, 서버에서 받은 데이터 등은 모두 State에 저장될 수 있습니다.
• 불변성(Immutable) : State는 직접 수정해서는 안됩니다. 리액트는 State의 변화를 감지하여 컴포넌트를 다시 렌더링합니다. 따라서, State를 변경하려면 반드시 setState나 useState와 같은 메서드를 사용해야 합니다.
• 리액트 컴포넌트에서의 사용 : 컴포넌트가 가진 상태 정보는 다른 컴포넌트와 분리되어 있으며, 이를 변경할 때마다 UI가 자동으로 갱신됩니다.

# State 사용 예시(함수형 컴포넌트)

function Counter() {
 // count 상태 변수를 선언하고, 이를 수정할 setCount 함수도 제공
 const [count, setCount] = useState(0);
 
 return (
  <div>
  	<p>현재 카운트 : {count}</p>
    <button onClick={() => setCount(count + 1)}>증가</button>
  </div>
 );
}

export default Counter;

 

---

2. Lifecycle(생명주기)

리액트 컴포넌트는 생명주기를 가지고 있으며, 컴포넌트는 시간의 흐름에 따라 생성, 업데이트, 삭제 됩니다. 각 단계마다 특정한 메서드가 호출됩니다. 리액트에서는 클래스 컴포넌트와 함수형 컴포넌트 모두 생명주기 메서드를 사용할 수 있지만, 함수형 컴포넌트에서는 주로 Hooks를 사용합니다.

* Hooks : 함수형 컴포넌트에서 상태 관리, 효과 처리, 컨텍스트 접근 등과 같은 React의 기능을 사용할 수 있도록 해주는 함수입니다. Hooks를 사용하면 클래스형 컴포넌트에서 제공되는 기능들을 함수형 컴포넌트에서도 쉽게 사용할 수 있습니다.

 

클래스 컴포넌트의 생명주기

출처 : https://gdsc-university-of-seoul.github.io/react-life-cycle/

리액트 클래스 컴포넌트의 생명주기는 크게 마운팅, 업데이트, 언마운팅 세 단계로 나눠집니다.

1. 마운팅(Mounting) : 컴포넌트가 처음으로 DOM에 삽입되는 과정입니다. 
   • constructor() : 컴포넌트가 마운트된 후 호출됩니다.
   • componentDidMount() : 컴포넌트가 마운트 된 후 호출됩니다.
2. 업데이트(Updating) : 업데이트가 필요한지 확인하는 메서드입니다.
   • shouldComponentUpdate() : 업데이트가 필요한지 확인하는 메서드입니다.
   • componentDidUpdate() : 업데이트가 완료된 후 호출됩니다.
3. 언마운팅(Unmounting) : 컴포넌트가 더 이상 화면에 표시되지 않을 때 DOM에서 제거되는 과정입니다.
   • componentWillUnmount() : 컴포넌트가 언마운트되기 직전에 호출됩니다.

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

export default MyComponent;

---

3. 상태 변경과 컴포넌트 생명주기의 관계

컴포넌트의 State는 해당 컴포넌트의 생명주기 동안 변경될 수 있습니다. 상태가 변경되면, 리액트는 컴포넌트를 다시 렌더링 하고, 그에 맞는 UI를 갱신합니다. 이때 setState나 useState를 통해 상태를 변경하며, 이 변경에 따라 컴포넌트의 생명주기 메서드나 Hooks가 호출됩니다.

---

Summary

리액트에서 State는 컴포넌트의 데이터를 관리하는 중요한 역할을 하며, Lifecycle은 컴포넌트가 생성, 업데이트, 삭제되는 과정에서 호출되는 메서드입니다. 컴포넌트가 상태를 변경할 때마다 UI가 자동으로 업데이트되고, 이 과정은 생명주기 메서드나 Hook을 통해 관리됩니다.