ch07.커스텀 Hooks 만들기

• 여러 컴포넌트에서 비슷한 기능을 공유할 경우 커스텀 Hook으로 로직을 재사용할 수 있다.

• import { useReducer } from "react";
  
  function reducer(state, action) {
    return {
      ...state,
      [action.name]: action.value,
    };
  }
  export default function useInputs(initialForm) {
    const [state, dispatch] = useReducer(reducer, initialForm);
    const onChange = (e) => {
      dispatch(e.target);
    };
    return [state, onChange];
  }

• import React, { useEffect, useState, useReducer } from "react";
  import useInputs from "./useInputs";
  const Info = () => {
    const [state, onChange] = useInputs({
      name: "",
      nickname: "",
    });
    const { name, nickname } = state;
    return (
      <div>
        <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>
      </div>
    );
  };
  export default Info;

다른 Hooks

• 다른 개발자가 만든 Hooks도 라이브러리로 설치하여 사용할 수 있다.
• https://nikgraf.github.io/react-hooks/

Collection of React Hooks

• https://github.com/rehooks/awesome-react-hooks

GitHub - rehooks/awesome-react-hooks: Awesome React Hooks