React - React - Hook 리액트 훅 사용법 정리 (3) useInput, useFetch

#1 useInput

#1.1 useInput 커스텀 훅 만들기

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

 

#1.2 useInput 커스텀 훅 생성

#1.3 useInput 커스텀 훅 연결

const name = useInput("");

<input {...name} placeholder="crazy" />

#1.4 예제

* useState를 통해 변수를 하나 만듬

* input를 위해 이름을 깔맞춤 했는데, value와 onChange로

* value는 단지 변수를 넣어주면 되고

* onChange는 함수를 줘야하고 event를 퉤 던지기 때문에 해당 함수를 만들어줘서

* 리턴한다.

import React, { useState } from "react";
import "./styles.css";
import Axios from "axios";
/**
 * useState를 통해 변수를 하나 만듬
 * input를 위해 이름을 깔맞춤 했는데, value와 onChange로
 * value는 단지 변수를 넣어주면 되고
 * onChange는 함수를 줘야하고 event를 퉤 던지기 때문에 해당 함수를 만들어줘서
 * 리턴한다.
 */
function useInput(defaultValue) {
  const [value, setValue] = useState(defaultValue);
  const onChange = e => {
    const {
      target: { value }
    } = e;
    setValue(value);
  };
  return { value, onChange };
}

export default function App() {
  const name = useInput("");
  console.log(name);
  return (
    <div className="App">
      <h1>Use Hook to INPUT && FETCHING</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input {...name} placeholder="crazy" />
    </div>
  );
}

 

#1.5 에제 2

 useInput함수를 정의할때, 두번째 인자로 함수를 받는다. 이는 유효성 검사를 하는 함수로 bool값을 리턴한다.

onchange가 발생했을때, e.target.value에서 가져온 값을 

1.유효성 검사 2. willupdate 값을 참 또는 거짓으로 바꾸기 3. 업데이트 실행하기

하고

리턴으로 {value,onChange}를 한다.

import React, { useState } from "react";
import "./styles.css";

const useInput = (dv, vf) => {
  const [value, setValue] = useState(dv);
  let willUpdate = true;
  const onChange = e => {
    if (typeof vf === "function") {
      willUpdate = vf(value);
    }
    if (willUpdate) {
      setValue(e.target.value);
    }
  };
  return { value, onChange };
};

export default function App() {
  const maxLen = value => {
    return value.length <= 10;
  };
  const name = useInput("M", maxLen);
  return (
    <div className="App">
      <h1>InputHooks with validator</h1>
      <input {...name} />
    </div>
  );
}

#2.0 useFetch

#2.1 useFetch 

payload 변수, loading 변수, error변수

useEffect는 componentdidmount처럼 쓰려고 []을 전달해준다. 해당 배열안에는 트레킹할 변수들을 넣어주면. 그 변수가 바뀔때만 update가 된다. 해당 변수가 비어있으니, didmount만 하고 끝~

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 {
      setError("something is worng!");
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    callUrl();
  }, []);
  return { payload, loading, error };
}

#2.1 lading, error, payload 에 따른 로직 처리

      <div>
        {loading && <span>loading yout Cats</span>}
        {!loading && error && <span>{error}</span>}
        {!loading && payload && <img src={payload.results[0].picture.large} />}
      </div>

# 2.2 예제 

import React, { useState, useEffect } from "react";
import "./styles.css";
import Axios from "axios";
/**
 * useState를 통해 변수를 하나 만듬
 * input를 위해 이름을 깔맞춤 했는데, value와 onChange로
 * value는 단지 변수를 넣어주면 되고
 * onChange는 함수를 줘야하고 event를 퉤 던지기 때문에 해당 함수를 만들어줘서
 * 리턴한다.
 */

/**
 * useEffect 컴포넌트 didmount, 컴포넌트 didupdate랑 같은거?!
 */
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 {
      setError("something is worng!");
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    callUrl();
  }, []);
  return { payload, loading, error };
}

export default function App() {
  const name = useInput("");
  //http://aws.random.cat/meow
  const { payload, loading, error } = useFetch("https://randomuser.me/api/");
  return (
    <div className="App">
      <h1>Use Hook to INPUT && FETCHING</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>
        {loading && <span>loading yout Cats</span>}
        {!loading && error && <span>{error}</span>}
        {!loading && payload && <img src={payload.results[0].picture.large} />}
      </div>
    </div>
  );
}

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA