⭐ React : Custom Hooks ⭐

CoderS·2023년 2월 14일
0

커스텀 훅 만들어보기

유튜버 '별코딩' 님의 리액트 영상을 보고 작성한 코드들!

React 에서 기본적으로 제공하는 hooks 와 추가하는 hooks 들이 존재한다!!

출처 : https://codersociety.com/blog/articles/react-hooks

useState, useEffect, useContext, useReducer, useCallback 등등...

일일이 코드를 작성하는 것보다 훅을 사용하면

  • 가독성 뛰어남
  • 편의성 제공
  • 오픈 소스 (누구나 사용 가능!)

편리한 기능들이 확실하다!

그럼 프로젝트 작업을 할 때, 중복되는 코드들이 존재할 수 있는데...
따로 코드를 다른 파일로 분리시켜서 커스텀 hook 을 만들면 어떨가?

1) useInput

input 태그 관련 커스텀 훅

App.js

import useInput from "./useInput";

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

export default function App() {
  const [inputValue, handleChange, handleSumbit] = useInput("", displayMessage);

  return (
    <div>
      <h1>useInput</h1>
      <input value={inputValue} onChange={handleChange} />
      <button onClick={handleSumbit}>확인</button>
    </div>
  );
}

그리고, useInput.js 라는 파일을 만들어주고 밑에 있는 코드들을 복사해준다.

useInput.js

import { useState } from "react";

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

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

  const handleSumbit = () => {
    setInputValue("");
    submitAction(inputValue);
  };

  return [inputValue, handleChange, handleSumbit];
}

사실상 App.js 에서 작성한 함수와 useState 를 다른 파일로 옮겨서, 나중에 쓸 수 있게 만든 것!

그리고 return 할 때, 배열로 필요한 요소들을 보내준다.

App.js 에서 나의 커스텀 훅을 불러오고 사용하면 끝!

처음 화면상

아무거나 입력한 후

버튼을 누르면

팝업창이 뜨면서 내가 작성한 문구가 뜨게 된다.

그 후

팝업창의 확인 버튼을 누르고, input 안에 있던 텍스트가 사라졌다!

2) useFetch

fetch 함수를 이용한 커스텀 훅

App.js

import useFetch from "./useFetch";

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

export default function App() {
  const { data: userData } = useFetch(BASEURL, "users");
  const { data: postData } = useFetch(BASEURL, "posts");
  const { data: todoData } = useFetch(BASEURL, "todos");

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

useFetch.js

import { useEffect, useState } from "react";

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

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

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

  return { data, fetchUrl };
}

useFetch 훅은 json 파일 형식을 데이터를 fetch 함수로 불러와, 간편하게 화면에 렌더링 할 수 있다.

useInput 과 달리 return 을 배열 형태가 아닌, 객체로 해서 App.js 에서도 구조분해를 객체를 사용해야 한다.

그리고 각 data 를 url path 에 맞춰 이름을 지어주고, 해당 첫 번째 데이터를 불러오는 것이다.

화면 상

끝으로 :

  • 한 파일에 몰아서 코드를 작성하는 것보다, 세분화해서 훅으로 사용하면 편리하긴 하다.
  • 이상하게 요즘따라 코딩이 다시금 재미있게 느껴진다.
profile
하루를 의미있게 살자!

0개의 댓글