Custom Hooks

개요

// 필요한 훅을 커스텀으로 만들어서 활용합니다.

필요한 기능을 만들어 훅으로 활용할 수 있다. 주로 여러 컴포넌트에 사용되거나 반복되는 코드들을 하나로 만들어 사용한다.

---

활용예제_useInput

// UsingCustomHook.js

function displayMessage(message) {
  alert(message);
}

function UsingCustomHook() {

  const [inputValue, handleChange, handleSubmit] = useInput("", displayMessage);
  // ===> [state, state를 업데이트, 전달된 state를 displayMessage함수로 처리.]
  const [inputValue2, handleChange2, handleSubmit2] = useInput(
    "123",
    displayMessage
  );
  const [inputValue3, handleChange3, handleSubmit3] = useInput(
    "456",
    displayMessage
  );

  return (
    <div>
      <h1>useInput</h1>
      <br />
      <input value={inputValue} onChange={handleChange} />
      <input value={inputValue2} onChange={handleChange2} />
      <input value={inputValue3} onChange={handleChange3} />
      <br />
      <button onClick={handleSubmit}>확인</button>
      <button onClick={handleSubmit2}>확인2</button>
      <button onClick={handleSubmit3}>확인3</button>
    </div>
  );
}

export default UsingCustomHook;

// useInput.js ---> 커스텀 훅이 될 컴포넌트

export function useInput(initialValue, submitAction) {
  const [inputValue, setInputValue] = useState(initialValue); // 매개변수를 초기값으로 설정

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

  const handleSubmit = () => {
    setInputValue("");
    submitAction(inputValue);
  };
  // ---> 전달되고 나면 state를 초기화 하고 매개변수 submitAction으로 그 값을 다룬다.

  return [inputValue, handleChange, handleSubmit];
  // ---> [state, state를 업데이트, state를 전달]
}

위 예제는 useInput이라는 커스텀 훅을 만들어 다른 컴포넌트에서 활용하는 예제이다.
확인을 누를 때 마다 input의 value를 alert해주는 방법이다.

state가 될 초기값을 설정해주는 inputValue를 생성하고 그 state를 업데이트 해주는 setInputValue를 활용하여 handleChange함수를 만들어 주었다.
그리고 그 값을 전달하기 위한 매개변수로 받은 submitAction을 handleSubmit을 만들어 주었다.

그리고 만들어진 state와 함수들을 배열로 return해주었다.

return된 값을 UsingCustomHook.js에서
상수배열로 처리한다.

useInput.js
--->
function useInput (초기값, 값을 처리하는 함수) {
// ...
}
return [ state, state를 업데이트, state를 전달 ]

UsingCustomHook.js
--->
const [ state, state를 업데이트, state를 전달 ]
= useInput(초기값, 값을 처리하는 함수)

이런식으로 짝지어서 생각하면 편하다.

---

활용예제_useFetch

// CustomHookUseFetch.js

const baseUrl = "https://jsonplaceholder.typicode.com";

function CustomHookUseFetch() {

  const { data: userData } = useFetch(baseUrl, "users");
  // ===> userData는 fatch를 통해 값을 받아오기 전에는 null이다.
  const { data: postData } = useFetch(baseUrl, "posts");
  // ===> postData도 마찬가지로 fatch를 통해 값을 받아오기 전에는 null이다.

  return (
    <div>
      <h1>useFetch</h1>
      <br />
      <h2>User</h2>
      {userData && <pre>{JSON.stringify(userData[0], null, 2)}</pre>}
      <h2>Post</h2>
      {postData && <pre>{JSON.stringify(postData[0], null, 2)}</pre>}
    </div>
  );
}

export default CustomHookUseFetch;

// useFetch.js

export function useFetch(baseUrl, initialType) {
  const [data, setData] = useState(null);

  const fetchUrl = (type) => {
    fetch(baseUrl + "/" + type)
      .then((res) => res.json())
      .then((res) => setData(res));
  };

  useEffect(() => {
    fetchUrl(initialType);
  }, []);

  return {
    data,
    fetchUrl,
  };
}

위 예제는 useFetch이라는 커스텀 훅을 만들어 다른 컴포넌트에서 활용하는 예제이다.
베이스가 되는 Url을 baseUrl을 지정하고 그 사이트에 해당하는 페이지들의 주소들을 받아와서 화면에 출력해준다.

상수 fetchUrl을 만들어 baseUrl을 토대로 해당페이지에 접근할 수 있게 해준다.

useFetch.js
--->
function useFetch ( 기준이 되는 Url, 초기값(접근할 페이지 주소) ) {
const 페이지에 접근할 수 있게 해주는 함수 = () => {}

// ...
}
return { state, 페이지에 접근할 수 있게 해주는 함수 }

CustomHookUseFetch.js
--->
const { state : 변수명 }
= useFetch(baseUrl, "초기값(접근할 페이지 주소)")

이런식으로 짝지어서 생각하면 편하다.

---

적용점

javascript와 React에 익숙해진다면 정말 요긴하게 사용될 듯하다. 그리고 학습하면서 javascript의 함수 관련해서 매개변수나 데이터가 파싱되는 것에 대해 좀 더 명확하게 알게됨과 동시에 javascript공부를 더 면밀히 해야겠단 생각이 들었다.

---

참조

• https://youtu.be/S6POUU2-tr8?si=Zbcj77783Ts3OrAo
  (별코딩 'React Hooks에 취한다' 시리즈)