[React] React State ( 함수형 컴포넌트 vs 클래스형 컴포넌트 )

React의 상태(state)가 변경되면 렌더링(Rendering) 과정이 실행됩니다.
React는 효율적인 업데이트를 위해 Virtual DOM을 활용한 최적화된 리렌더링을 수행합니다.

• React는 변경된 state 값을 Virtual DOM에 적용합니다.
• Virtual DOM이란?
  • 실제 DOM을 직접 변경하는 것이 아니라, 메모리 상에 존재하는 가상의 DOM을 수정하는 방식.
  • 변경 사항을 먼저 Virtual DOM에 적용한 후, 실제 DOM과 비교하여 최소한의 변경만 실제 DOM에 반영함.

React의 State가 변경되면?

1.  setState(useState)가 호출됨
2. Virtual DOM을 변경
3. 기존 Virtual DOM과 비교(diffing)
4. 변경된 부분만 실제 DOM에 반영 (최적화)
5. 필요한 경우, useEffect 등의 훅 실행

1. 함수형 컴포넌트 (Functional Component)

• useState 훅을 사용하여 상태를 관리합니다.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 상태 선언

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

2. 클래스형 컴포넌트 (Class Component)

• this.state로 상태를 관리하고, setState로 변경.
• this 바인딩이 필요하여 코드가 길어짐.
• React 16.8 이전에는 클래스형이 주로 사용되었으나, 현재는 함수형이 더 많이 쓰임.

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 }; // 상태 선언
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 }); // 상태 업데이트
  };

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

export default Counter;