useState()

useState는 함수형 컴포넌트에서 상태관리를 할 수 있도록 제공하는 훅입니다.

 

class example

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

hook example

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0);

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

 

point1 useState불러오기.

import React, { useState } from 'react';

 

point2 useState 호출

일반 변수는 함수가 끝날 때 사라지지만 useState로 호출한 state변수는 react에 의해 사라지지 않습니다.

함수는 this를 가질 수 없기에 useState를 직접 호출합니다.

 

point3 useState의 인자

state의 초기값입니다.

 

point4 useState 반환값

state변수, 해당 변수를 갱신할 수 있는 함수 쌍을 배열 형태로 반환.

this.setState와 달리 state를 갱신하는 것은 병합이 아니라 대체입니다.

 

point5 여러 개의 상태관리

useState함수는 하나의 상태 값만 관리할 수 있습니다. 여러 개의 상태를 관리하려면 useState를 여러 번 사용하면 됩니다.

 

 

1. state 가져오기

this.state 필요 없음

 

class 방식

hook 방식

 

2. state 갱신

this 호출 안해도 됨.

class

hook