React

Custom hooks

훅은 재사용 가능한 기능이다.

여러 구성 요소에서 사용해야 하는 구성 요소 로직이 있으면 해당 로직을 사용자 정의 훅으로 추출할 수 있다.

사용자 지정 훅은 “use”로 시작한다. 예: useFetch.

훅 구축

다음 코드에서는 홈 구성 요소에서 데이터를 가져와 표시한다.

JSON Placeholder 서비스를 이용하여 가짜 데이터를 가져올 것이다.
이 서비스는 기존 데이터가 없을 때 애플리케이션을 테스트하기에 좋다.

JSON 자리 표시자 서비스를 사용하여 가짜 “할 일” 항목을 가져오고 페이지에 제목을 표시한다.

예제 – index.js

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

가져오기 로직은 다른 구성요소에도 필요할 수 있으므로 이를 사용자 정의 훅으로 추출한다.

사용자 정의 훅으로 사용할 새 파일로 가져오기 논리를 이동한다.

예제 – useFetch.js

import { useState, useEffect } from "react";

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

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

예제 – index.js

import ReactDOM from "react-dom/client";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

예제 설명

우리는 데이터를 가져오는 데 필요한 모든 논리를 포함하는 useFetch라는 함수를 포함하는 useFetch.js라는 새 파일을 만들었다.

하드코딩된 URL을 제거하고 사용자 정의 훅에 전달할 수 있는 url 변수로 대체했다.

마지막으로 훅에서 데이터를 반환한다.

index.js에서는 다른 훅과 마찬가지로 Fetch 훅을 사용하여 사용하고 있다.
여기서 데이터를 가져올 URL을 전달한다.

이제 모든 구성 요소에서 이 사용자 지정 훅을 재사용하여 모든 URL에서 데이터를 가져올 수 있다.

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기