React pain point 는 첫번째로 handling input이고 두번째는 fetching 이라고 볼 수 있다!!
따라서 유용하게 사용할 수 있는 hooks를 만들어 보았다.🌷

React Hooks

functional component에서 state를 가질 수 있게 한다.
즉, functional programming style!

useInput

function useInput(defaultValue) {
  const [value, setValue] = useState(defaultValue);
  const onChange = (e) => {
    //const value=e.target.value;
    const {target:{value}}=e;
    setValue(value);
  };

  return { value, onChange };
}

useState로 item 변수를 선언한다.
useState는 array를 return하고 value와 value를 변경하는 법 2가지를 준다.
class component는 메뉴얼하게 하나씩 바꿔줘야 한다.

useState가 react state management의 밑으로 들어가서 훅을 땡기는 것이다.

value는 값, onChange는 함수를 return한다.

const App=()=> {
  const name = useInput("");
  console.log(name);
  return (
    <div className="App">
      <h1>Use Hooks</h1>
      <br />
      <input {...name} placeholder="Whats your name?" />
    </div>
  );
}

useFetch

function useFetch(url) {
  const [payload, setPayload] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const callUrl = async () => {
    try {
      const { data } = await Axios.get(url);
      setPayload(data);
    } catch (e) {
      setError("error!!");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    // only did mount
    callUrl();
  }, []);

  return { payload, loading, error };
}

payload, error, loading을 useState를 사용해서 선언한다.
callUrl 함수를 비동기적으로 작동시키고 url에서 데이터를 받아온다.

useEffect는 componentDidMount, componentDidUpdate랑 비슷하다.
API에서 데이터를 요청할 때 사용된다.

여기서는 componentDidMount 기능만을 사용할 것이다.
왜냐하면 input에 이름이 바뀔때 마다 url을 또 불러오게 하지 않기 위해서 update를 하지 않을 것이다.
componentDidMount만 사용하는 코드는 다음과 같다.

  useEffect(() => {
    // only did mount
  }, []);

[]를 비워서 update를 하지 않는다.

const App=()=> {
  const name = useInput("");
  const { payload, loading, error } = useFetch("https://randomuser.me/api/");
  console.log(name);
  return (
    <div className="App">
      <h1>Use Hooks</h1>
      <br />
      {loading && <span>loading picture</span>}
      {!loading && error && <span>{error}</span>}
      {!loading && payload && <img src={payload.results[0].picture.large} />}
      <input {...name} placeholder="Whats your name?" />
    </div>
  );
}

API에서 fetch해오고 payload, loading, error를 받아온다.

console log를 보면 Input 창에 입력되는 것이 바로 변경되는 것을 확인할 수 있다.
API에서 fetch한 사진 또한 볼 수 있다.