(React Hook)useState 는 무엇일까?

목적

• useState가 무엇인가?
• useState의 작동원리는 어떻게 되는가

useState는 함수형 또는 클래스형 컴포넌트의 상태를 관리하고 , 변경할 수 있도록 도와주는 하나의 React Hook이다.

 

useState 함수 불러오기

import React , { useState } from 'react' ;

 

간단한 코드의 예시

const [value, setValue] = useState(0);

 

• value: 현재 상태 값을 저장하는 변수입니다.
• setValue: 상태 값을 업데이트하는 함수입니다.
• useState(0): value의 초기값을 0으로 설정합니다.

위 처럼 보면 좋습니다 .

 

초기에는 value가 초기값(여기서는 0)을 가집니다. 그리고 이벤트를 통해 setValue를 호출하면, value가 새로운 값으로 업데이트됩니다. 업데이트된 값은 다음 렌더링 시에 반영됩니다.

 

1. 함수형 코드

함수형 컴포넌트는 단순히 JavaScript 함수로 정의되며, 상태나 생명주기 메서드를 사용하기 위해 React 훅을 활용합니다.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const incrementCounter = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default Counter;

 

 

2. 컴포넌트형 코드

클래스형 컴포넌트는 ES6 클래스 문법을 사용하여 정의되며, 상태 관리를 위해 state 객체를 사용하고, 생명주기 메서드를 정의할 수 있습니다.

import React, { Component } from 'react';

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

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

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

export default Counter;

 

위의 두 코드는 동일하게 작동을 합니다.

 

 

성능으로 봤을 때는

함수형 컴포넌트는 React의 최적화 덕분에 클래스형 컴포넌트보다 성능이 더 좋을 수 있습니다.