22.03.23(数値)Hooks

Hooks?

Hooksは反応v 168の新機能.
1.関数構成部品でステータスのユーザーステータスを管理できます.
2.レンダリング後のタスクを設定するためのユーザー・エフェクトなどの機能を提供します.
既存の関数型構成部品ではできないさまざまな操作を実行できます.

useState

Hook関数では、関数構成部品のステータス管理が可能になります.

使用方法

const [value, setValue] = useState(0); 

ユーザーステータスのパラメータ:デフォルトのステータス値.

usStateの戻り値:戻り配列、配列の最初の要素はステータス値、2番目の要素はステータスを変更するsetter関数です.

使用例

import React, { useState } from 'react';
const CounterUseState = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b>입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};
export default CounterUseState;

useEffect

Hook関数は、反応素子をレンダリングするたびに実行するアクションを設定します.

使用方法

useEffect(()=> {
  /*렌더링 직후 수행할 작업*/
  return (/*렌더링 직전 또는 언마운트되기 전 수행할 작업*/ );
},[/*검사하고 싶은 값들*/])

useEffectパラメータ:ステップ実行するタスクを含む関数、チェックする値を含む配列
userEffect戻り値:レンダリング前またはアンインストール前に実行するアクションを含む関数.

使用例

import React, { useState, useEffect } from 'react';
const CounterUseEffect = () => {
  const [value, setValue] = useState(0);
  useEffect(() => {
    console.log('카운터 렌더링 완료');
    return () => console.log('렌더링 직전 작업 수행 중');
  }, [value]);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b>입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};
export default CounterUseEffect;

useReducer

Hook関数は、構成部品によって異なる状態を異なる値に更新するために使用されます.
Reduserは、現在のstate、更新に必要な情報を含むactionを受信し、新しいstateを返す関数です.
reducer関数に新しいstateを作成し、戻るときは不変性を維持する必要があります.
useReducerの最大の利点は、reduce関数を個別に定義することで、素子更新ロジックを素子から除外できることです.

使用方法

function reducer (state,action) {
	return 새로운 state;
}
const [state,dispatch] = useReducer(reducer,state의 기본 값);

userReducer戻り値:state,dispatch

州:現在のステータス

dispatch:動作をパラメータとして減速機の関数に渡す.

reduce:現在の状態と動作を受信し、新しい状態を返す関数.

使用例

import React, { useReducer } from 'react';
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      return state;
  }
}
const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{state.value}</b>입니다.
      </p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
    </div>
  );
};
export default Counter;