클래스 컴포넌트와 함수형 컴포넌트에서의 useState() 비교

클래스 컴포넌트에서 setSTate()함수를 호출해서 state가 업데이트되고 컴포넌트가 재렌더링 되는 과정은 동일하지만 업데이트 방식의 차이가 존재한다.

 

클래스컴포넌트에서의 setState()

클래스형 컴포넌트에서는 상태를 하나의 객체로 묶어서 관리한다.

setState()메서드를 호출할 때, 객체를 전달해서 여러 개의 상태 값을 동시에 업데이트 할 수있다.

예를 들어 count와 name을 동시에 업데이트할 때는 다음과 같이 할 수 있다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: 'John',
    };
  }

  increment = () => {
    this.setState({
      count: this.state.count + 1,
      name: 'Jane', // 여러 개의 상태를 한 번에 업데이트 가능
    });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <h2>Name: {this.state.name}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

 

 

함수형 컴포넌트에서의 useState()

반면, 함수형 컴포넌트에서는 useState()를 사용해 각각의 상태를 별도로 관리한다.

useState는 개별적인 상태와 해당 상태를 업데이트하는 함수를 반환한다.

즉, 여러 개의 상태가 있을 때마다 각각 useState로 선언하고, 각각에 대해 별도의 set함수가 존재한다.

예를 들어, count와 name 상태를 관리하는 경우 다음가 같이 할 수 있다.

import React, { useState } from 'react';

function MyComponent() {
  // 각각의 상태 변수와 해당 set 함수가 따로 존재
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Moo');

  const increment = () => {
    setCount(count + 1);  // count만 업데이트
    setName('You');      // name만 업데이트
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <h2>Name: {name}</h2>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

 

 

정리

1. 클래스 컴포넌트:

• 상태를 하나의 객체로 묶어서 관리하고, setState()메서드 하나로 여러 상태를 동시에 업데이트할 수 있다.
• setState()는 상태 객체의 일부를 업데이트 할 때 병합 방식으로 동작한다.(즉, 기존 상태와 새 상태를 합쳐서 업데이트)

2. 함수형 컴포넌트(useState)

• 상태는 각각 별도의 변수로 관리되며, 각 변수에 대해 set 함수가 따로 존재한다.
• useState()로 정의된 상태는 독립적이고, setState()처럼 자동으로 병합되지 않는다. 즉, 상태를 하나씩 개별적으로 업데이트 해야 한다.

 

클래스형 컴포넌트 : 한번에 상태 업데이트 가능

this.setState({ count: 1, name: 'Moo' });

 

함수형 컴포넌트 : 각각 상태 업데이트

setCount(1);   // count만 업데이트
setName('Moo'); // name만 업데이트