hooks는 react 의 state machine에 연결하는 기본적인 방법이다.

코드를 더 예쁘게 만들어주고, 더이상 class를 사용하지 않고, 모든 것이 함수형 프로그래밍이 되는 것이다.

즉, nice한 프로그래밍을 위함이다.

useState

useSatate는 항상 2개의 값을 return 한다. 첫번째는 Value 이고, 두번째는 Value를 변경한다.

형태는 아래와 같다.

const [item, setItem] = useState(1)

hooks를 사용한 경우

import "./App.css";
import { useState } from "react";

const App = () => {
  const [item, setItem] = useState(1);
  const plusItem = () => setItem(item + 1);
  const minusItem = () => setItem(item - 1);

  return (
    <div>
      <hi>{item}</hi>
      <button onClick={plusItem}>plus</button>
      <button onClick={minusItem}>minus</button>
    </div>
  );
};

export default App;

hooks를 사용하면 class 컴포넌트에서 고려해야 할 것들을 신경쓰지 않아도 된다.

그렇다면 기존의 방식(Class Component)로 만든 것과 비교해보자.

기존의 방식(Class Component)을 사용한 경우

class AppUgly extends React.Component{
  const {item:1} = this.state;
  render(){
    return (
      <div>
        <hi>{item}</hi>
        <button onClick={plusItem}>plus</button>
        <button onClick={minusItem}>minus</button>
      </div>
    );
  }
  const plusItem = () => this.setState(state=>{return{
    item:state.item+1
  }});
  const minusItem = () => this.setState(state=>{return{
    item:state.item-1
  }});
}

.. 너무 길어졌다.

hooks 와 class 의 차이는 이러하다. 코드의 간결함과 편의성!

이게 hooks 가 필요한 이유이다.

hooks에는 여러가지가 있다. useContext, useReducer, useCallback, useMemo 등등..

계속해서 배워보자.

출처

react 공식문서 : https://ko.legacy.reactjs.org/docs/hooks-reference.html