[React] React Hook-1.0 useState

https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 랜더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서는 할 수 없었던 다양한 작업을 할 수 있게 해준다. 

     →    class를 사용하지 않고도 함수형 프로그래밍을 가능하게 해준다.

 

 

< class component로 구현한 counter >

- this 등과 같은 문장 규칙과 render 등을 고려해야한다.

export default class AppComponent extends React.Component {
  state = { item: 1 };
  render() {
    const { item } = this.state;
    return (
      <div className="AppComponent">
        <h1>By Component {item}</h1>
        <button onClick={this.incrementItem}>increment</button>
        <button onClick={this.decrementItem}>decrement</button>
      </div>
    );
  }
  incrementItem = () => {
    this.setState((state) => {
      return { item: state.item + 1 };
    });
  };

  decrementItem = () => {
    this.setState((state) => {
      return { item: state.item - 1 };
    });
  };
}

 

 

< useState hook을 사용한 counter>

useState

- useState 는 가장 기본적인 Hook 으로, 함수형 component에서도 가변적인 상태를 지니고 있을 수 있게 해준다.

- 함수형 component에서 상태를 관리해야할 때 사용한다.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

export default function App() {
  const [item, setItem] = useState(1);
  const incrementItem = () => setItem(item + 1);
  const decrementItem = () => setItem(item - 1);

  return (
    <div className="App">
      <h1>By Hooks {item}</h1>
      <button onClick={incrementItem}>increment</button>
      <button onClick={decrementItem}>decrement</button>
    </div>
  );
}

- 동일하게 매우 잘 작동하지만 component가 아니므로 this, render 등을 사용하지 않고 return만 하면 된다.

  → hook을 사용한 경우가 class component를 사용한 코드에 비해 매우 간결하고 깔끔하다.