react setState와 useState 비교하기

간단한 카운트 함수

 

먼저 class 기반으로 생성된 setState를 활용한 카운트 증가함수이다 

import React from "react";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  setCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    const { count } = this.state;
    return (
      <>
        <button onClick={this.setCount}>{count}</button>
      </>
    );
  }
}

 

다음은 함수형을 기반으로 생성된 useState를 활용한 카운트 증가함수이다

 

useState를 import 한후 

 

const [값, 값을변경할수있는 함수(보통set으로시작)] = useState(초기값);

 

확실히 리액트 훅을 활용해서 개발하는 방법이 훨씬 코드가 간결해지고 명확해지는 느낌이있다.

import React, { useState } from "react";

function App() {
  //변수와 변수를 설정해주는함수
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => setCount(count + 1)}>{count}</button>
      </header>
    </div>
  );
}

export default App;