[리액트를 다루는 기술] 커스텀 Hook으로 코드 정리

기존 코드

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>
    </>
  )
}

userInputs.js

import React, { useReducer } from 'react'

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

export default function useInputs(initialForm) {
  const [state, dispatch] = useReducer(reducer, initialForm);

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

  return [state, onChange];
}

Info.js

import useInputs from "./useInputs";

export default function Info() {
  const [state, onChange] = useInputs({
    name: '',
    nickname: '',
  })
  const [name, nickname] = state;

  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>
    </>
  )
}

• hook을 직접 만들어 코드 정리 완성