(코드 상태) 사용자 지정 후크 연습

연습 1

app.js

import "./styles.css";
import useFetch from "./util/useFetch";

export default function App() {
  const isdata = useFetch("data.json");
  return (
    <div className="App">
      <h1>To do List</h1>
      <div className="todo-list">
        {isdata &&
          isdata.todo.map((el) => {
            return <li key={el.id}>{el.todo}</li>;
          })}
      </div>
    </div>
  );
}

useEffect.js

//app.js에서 함수를 가져와서 Custom hook을 만들어 봅시다.
//hooks.js의 이름도 알맞게 바꿔주세요.

import { useEffect, useState } from "react";

const useFetch = (fetchUrl) => {
  const (data, setData) = useState();

  useEffect(() => {
    fetch(fetchUrl, {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      }
    })
      .then((response) => {
        return response.json();
      })
      .then((myJson) => {
        setData(myJson);
      })
      .catch((error) => {
        console.log(error);
      });
  }, ());

  return data;
};

export default useFetch;

연습 2

app.js

import { useState } from "react";
import useInput from "./util/useInput";
import Input from "./component/Input";
import "./styles.css";

export default function App() {
  //input에 들어가는 상태값 및 로직을 custom hook으로 만들어봅니다.
  //until 폴더의 useInput.js 파일이 만들어져 있습니다.
  const (firstNameValue, firstNameBind, firstNameReset) = useInput("");
  const (lastNameValue, lastNameBind, lastNameReset) = useInput("");
  const (nameArr, setNameArr) = useState(());

  const handleSubmit = (e) => {
    e.preventDefault();
    setNameArr((...nameArr, `${firstNameValue} ${lastNameValue}`));
    firstNameReset();
    lastNameReset();
  };

  return (
    <div className="App">
      <h1>Name List</h1>

      <div className="name-form">
        <form onSubmit={handleSubmit}>
          <div className="name-input">
            <label>성</label>
            <Input nameValue={firstNameBind} />
          </div>
          <div className="name-input">
            <label>이름</label>
            <Input nameValue={lastNameBind} />
          </div>
          <button>제출</button>
        </form>
      </div>
      <div className="name-list-wrap">
        <div className="name-list">
          {nameArr.map((el, idx) => {
            return <p key={idx}>{el}</p>;
          })}
        </div>
      </div>
    </div>
  );
}

useInput.js

//이 곳에 input custom hook을 만들어 보세요.
//return 해야 하는 값은 배열 형태의 값이어야 합니다.

import { useState } from "react";

function useInput(initialValue) {
  const (value, setValue) = useState(initialValue);
  const bind = {
    value,
    onChange: (e) => {
      setValue(e.target.value);
    }
  };
  const reset = () => {
    setValue(initialValue);
  };
  return (value, bind, reset);
}

export default useInput;

input.js

function Input({ nameValue }) {
  return (
    <>
      <input
        value={nameValue.value}
        onChange={nameValue.onChange}
        type="text"
      />
    </>
  );
  //input을 컴포넌트로 만들어봅니다.
  //input도 컴포넌트도 만들게 되면 로직을 조금 더 고민을 해야 합니다.
  //고민을 한 번 해보고, 시도 해보세요!
}

export default Input;