React - useState

 

useState : 함수형 컴포넌트에서, state를 제어 할 수 있게 해주는 React Hook

 

사용법 :

const [value, setValue] = useState(초깃값)

value 에는 초깃값이 할당된다.

setValue를 이용하여 값을 변경할 수 있다.

 

간단한 예제

 

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState(0);
  const upNumber = () => setValue(value + 1);
  const downNumber = () => setValue(value - 1);
  return (
    <div>
      <h1>Count</h1>
      <div>{value}</div>
      <button onClick={upNumber}>UP</button>
      <button onClick={downNumber}>DOWN</button>
    </div>
  );
};

export default App;

 

 

같은 걸 클래스 컴포넌트로 구성한다면

 

import React from "react";

class App extends React.Component {
  state = {
    count: 0
  };

  upNumber = () =>
    this.setState((state) => ({
      count: state.count + 1
    }));
  downNumber = () =>
    this.setState((state) => ({
      count: state.count - 1
    }));

  render() {
    const { count } = this.state;
    return (
      <div>
        <h1>Count</h1>
        <div>{count}</div>
        <button onClick={this.upNumber}>UP</button>
        <button onClick={this.downNumber}>DOWN</button>
      </div>
    );
  }
}

export default App;

 

useState를 이용해서 하는게 훨씬 간결하다는걸 확인 할 수 있었다!