useReducer 카운터

// Counter.js
import React, {useReducer} from 'react'

function reducer(state, action) {
  // action.type에 따라 다른 작업 수행
  switch(action.type) {
    case 'INCREMENT':
      return {value: state.value+1}
    case 'DECREMENT':
      return {value: state.value-1}
    default:
      // 아무것도 해당되지 않을 때 기존 state 반환
      return state;
  }
}

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

• reducer 함수 생성 후 switch로 action.type 별로 분류
• useReducer로 state와 dispatch 비구조할당
  • 첫 매개변수: 사용할 reducer 함수
  • 두 번째 매개변수: state의 초기값
• dispath()에 들어간 값으로 판별

useReducer 이용하여 input 관리

// Info.js
import React, {useReducer} from 'react'

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value // action === e.target
  }
}

export default function Info() {
  const [state, dispatch] = useReducer(reducer, {
    name: '',
    nickname: '',
  })
  const {name, nickname} = state; // name, nickname 비구조 할당

  function onChange(e) {
    dispatch(e.target);
  }

  return (
    <>
      <div>
        <input name='name' value={name} onChange={onChange} />
        <input name='nickname' value={nickname} onChange={onChange} />
      </div>
      <div>
        <div>
          <b>이름: </b>{name}
        </div>
        <div>
          <b>닉네임: </b>{nickname}
        </div>
      </div>
    </>
  )
}

• dispatch(e.target)을 넣어주므로 e.target.name에 맞게 value 변경
• 코드 작성에 용이하도록 name과 nickname 비구조할당