3.React-Native(리액트 네이티브) UseReducer

UseReducer는 useState를 통해서 할 수 있는 작업들을 조금 더 정교하고 복잡하게 처리할 수 있게 해준다.

UseReducerComponent.js

import React, { Fragment, useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'NameChange':
      return { ...state, name: action.value };
    case 'AgeChange':
      return { ...state, age: action.value };
    default:
      throw new Error(`${action.type} is not a valid action`);
  }
}

export default function UseReducerComponent() {
  const [{ name, age }, dispatch] = useReducer(reducer, {});

  return (
    <Fragment>
      <input
        placeholder="Name"
        value={name}
        onChange={e => dispatch({ type: 'NameChange', value: e.target.value })}
      />
      <p>Name: {name}</p>
      <input
        placeholder="Age"
        type="number"
        value={age}
        onChange={e => dispatch({ type: 'AgeChange', value: e.target.value })}
      />
      <p>Age: {age}</p>
    </Fragment>
  );
}

UseReducer 를 초기화 해준다. {name,age} 는 Componet 에서 사용할 이름이고, dispatch는 지정한 reducer 함수에 값을 보낼때 사용된다. useReducer(reducer,{})의 reducer 는 dispatch를 통해 보내진 값들을 처리할 함수이며 {}는 초기값이다.

 

위와 같이 reducer에 dispatch로 값들을 보내면,

 

function reducer(state,action) 에서는 state 값들은 기존에 사용하던 값들이고, action은 새롭게 dispatch 된 값들이다.

처음 로직이 실행되면 초기값을 {} 로 정했기 때문에, state는 빈값이고, 값들을 입력하면, 기존의 값들은 state로 새롭게 들어오는 값들은 action을 통해 사용하면 된다.