Custom Hooks

→ Open in Slid

---

‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

만약에, 내가 input 이 많아진다면 이 input을 담을 함수가 많이 필요하게 된다. 그러면 소스가 복잡해지고 중복 되는 것이 많아 지기에 useState 처럼 가져다 쓸수 있는 custom hook을 만들어 보자!

일단 userInput 파일을 하나 만들자

export function useInput(initialValue){
  const [inputValue, setInputValue] = useState(initialValue);

  const handleChange = (e) => {
    setInputValue(e.target.value);
  }

  return [initialValue,handleChange]
  
}
// useInput 이라는 custom hook이고 custom hook을 만들때는 함수명을 use로
// 시작해야 한다.

이렇게 custom Hook을 만들었다. 이제 적용해보자

‏‏‎ ‎

import {useInput} from './useInput' 
// 이전 App 에 있었던 import 들은 custom Hook 안에 다 있으므로 useInput
// 이거 하나만 import 해도 된다. 

function App() {
  const [inputValue, handleChange] = useInput('');
  // useInput coustom hook 에서 return 값이 배열로 2개를 가지고 있어
  // 그 2개의 값을 useInput에 넣는다. 
  
}

이제부터는 확인 버튼에 대한 submit 를 coustom hook 에 추가 해보자

export function useInput(initialValue,submitAction){
  // 매개변수로 초기값과 ,버튼 submit에 대한 submitAction을 넣었다.
  
  const [inputValue, setInputValue] = useState(initialValue);

  const handleChange = (e) => {
    setInputValue(e.target.value);
  }
  
  const handleSubmit = () =>{
    setInputValue('') // 확인 버튼을 누르면 input 이 초기화
    submitAction(inputValue);
  }
  
  return [initialValue,handleChange,handleSubmit];
  
}

‏‏‎ ‎

export default function App() {
 const [inputValue, handleChange, handleSubmit ] 
   = useInput('안녕',A);// A에 submitActin 값을 넣어야 한다. 
  // 확인 버튼을 눌렀을때 alert 창이 나오게 했으므로 이것을 submitAction 
  // 값으로 만든다. 
  

2 번째 custom Hook  : useFetch

fetch API 를 통해서 네트워크에서 데이터를 가지고 오는 기능을 가지는 custom Hook 이다.

https://jsonplaceholder.typicode.com/users

‏‏‎ ‎

‏‏‎ ‎

const baseUrl = 'https://jsonplaceholder.typicode.com';
//뒤에 /users 는 뺀다. 왜냐햐면 뒤에 변수로서 원하고자 하는 주소 값을 
// 얻고자 함이다. 

const fetchUrl = (type) =>{
  fetch(baseUrl + '/' + type) // /뒤에 usres,post 등을 type으로...
  	.then((res)=> res.json())
  	.then((res)=> setData(res));
 
};

useEffect(()=>{
  fetchUrl('users')
},[])

‏‏‎ ‎

pre tag

pre 태그는 미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용합니다.

pre 요소 내의 텍스트는 시스템에서 미리 지정된 고정폭 글꼴(fixed-width font)을 사용하여 표현되며, 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타납니다.

---

json 파일을 html 화면에서 보려면

{JSON.stringify(data,null,2)} 요렇게~

---

usesFetch custom Hook 을 만들자!!!

useFetch.js 파일을 만든다.

‏‏‎ ‎

import { useFetch } from './useFetch';

const {data, fetchUrl} = useFetch(baseUrl,'users');
// useFetch 컴포넌트는 매개변수로 baseUrl, initialType 을 받기에 
// useFetch(baseUrl,'users') 이렇게 했고, 
//const {data, fetchUrl} = useFetch() 은 useFetch 컴퍼넌트를 
//{data, fetchUrl}로 구조분해 할당을 한것이다. 

const { data, fetchUrl } = useFetch(baseUrl, 'users');

const { data: userData } = useFetch(baseUrl, 'users');

<pre>{JSON.stringify(userdata[0], null, 2)} </pre>
// 이렇게 할경우 화면에 JSON 파일이 안나올 수도 있다. 왜냐하면 
//fetch 에서 아직 불러오지 못했기 때문이다. 이럴때는 
{userData && <pre>{JSON.stringify(userdata[0], null, 2)} </pre> }

한 화면에 여러개 type의 정보를 얻고 싶을 때는

const { data: userData } = useFetch(baseUrl, 'users');
const { data: postData } = useFetch(baseUrl, 'post');


{userData && <pre>{JSON.stringify(userdata[0], null, 2)} </pre> }
{postData && <pre>{JSON.stringify(postData[0], null, 2)} </pre> }