Custom Hooks

: 개발자가 스스로 커스텀한 Hook
Custom Hook을 만들면 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다.

• 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 주로 사용한다.
• e.g. 여러 개의 URL을 fetch할 때, 여러 개의 input에 의한 상태 변경 등

Custom Hook의 장점

1. 상태 관리 로직의 재활용이 가능하다.

2. 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있다.

3. 함수형(useSomething())으로 작성하기 때문에, 보기에 명료하다.

4. Custom Hook 내부에서 React 내장 Hook을 사용할 수도 있다.
   일반 함수 내부에서는 React Hook을 불러 사용할 수 없지만, Custom Hook 내부에서는 가능하다.

5. Custom Hook을 사용하는 컴포넌트들은 컴포넌트마다 state와 effect를 독립적으로 가진다. (재사용성 ↑)
   같은 Custom Hook을 사용한다고 해서 두 컴포넌트가 같은 state를 공유하는 것이 아니다.
   그저 로직만 공유할 뿐, state는 각 컴포넌트 내에서 독립적으로 정의된다.

Custom Hooks 만들 때 규칙

• 함수 이름 앞에 use를 붙인다.
• 대부분의 경우, 프로젝트 내의 hooks 폴더에 Custom Hook을 위치시킨다.
• Custom Hook으로 만들 때, 함수는 조건부 함수가 아니어야 한다.
  즉, 리턴하는 값이 조건부여서는 안된다.

useFetch

: fetch API를 통해 네트워크상에서 데이터를 가져올 수 있게 해주는 Custom Hook

App.js

import useFetch from './hooks/useFetch';

function App() {
  const url = "https://jsonplaceholder.typicode.com/users";

  const fetchedData = useFetch(url);
  console.log(fetchedData); // 데이터를 받아오는 것을 확인할 수 있다.

  return (
    <div></div>
  );
}

export default App;

useFetch.js

import { useEffect, useState } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  const fetchUrl = () => {
    fetch(url)
    .then((res) => res.json())
    .then((data) => setData(data));
  }

  useEffect(() => {
    fetchUrl(url); // fetchUrl 함수 호출
  }, [url]);       // url이 변경될 때마다 실행된다.
  
  return data;
}

export default useFetch;

useInput

여러 개의 input에 의한 상태 변경을 할 때 쓸 수 있는 Custom Hook

App.js

import useInput from './hooks/useInput';

const displayMessage = (message) => {
  alert(message);
};

function App() {
  const [inputValue, handleChange, handleSubmit] = useInput('', displayMessage);
 
  return (
    <div>
      <input value={inputValue} onChange={handleChange} />
      <button onClick={handleSubmit}>확인</button>
    </div>
  );
}

export default App;

useInput.js

import { useState } from "react";

const useInput = (initialValue, submitAction) => {
  const [inputValue, setInputValue] = useState(initialValue);
  
  const handleChange = (e) => {
    setInputValue(e.target.value);
  };
  
  const handleSubmit = () => {
    setInputValue('');
    submitAction(inputValue);
  };
  
  return [inputValue, handleChange, handleSubmit];
}


export default useInput;