React HOOKS

eslint-plugin-react-hooks

• 자동으로 HOOKS rules 적용하기 위해 linter 플러그인을 제공하고 있다.
• eslint 설치 문서

useReducer

import React, { useReducer } from "react";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
function init(initialState) {
  return { initialState: 0 };
}
const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}
//reducer가 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, 0 , init);

  //state는 컴포넌트에서 사용할 상태
  //dispatch는 액션을 발생시키기 위한 함수
  const onIncrease = () => {
    dispatch({ type: "INCREMENT" });
  };
  const onDecrease = () => {
    dispatch({ type: "DECREMENT" });
  };
  // type을 보내면 reducer의 action.type이 되어 값을 변경

  return (
    <div>
      <h1>{state}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

사용이 너무 어려운듯 ;