React, useReduce, 커스텀 Hook (useInputs)

useInput.jsx

import { useReducer } from 'react'; // 다양한 컴포넌트 상황에 따라 상태를 다른 값으로 업데이트

function reducer(state, action) {
  // 불변셩을 지키면서 업데이트한 새로운 상태를 반환
  return {
    ...state,
    [action.name]: action.value,
  };
}


// 컴포넌트 사황에 따라 다양하게 적용되는 useReducer hook
// useReducer 첫번째 파리미터는 리듀서 함수, 두번째 파라미터에는 기본값
export default function useInputs(initialForm) {
  const [state, dispatch] = useReducer(reducer, initialForm);
  const onChange = (e) => {
    dispatch(e.target);
  };
  return [state, onChange];
}

 

Info.jsx

import React from 'react';
import useInputs from './useInputs';

const Info = () => {
  const [reduceState, onChange] = useInputs({
    name: '',
    nickname: '',
  });
  const { name, nickname } = reduceState;

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

export default Info;

 

https://stackblitz.com/edit/react-basecamp-emcnkpqn?embed=1&file=src%2FInfo.jsx