[TIL] 0616 | React with Redux, Next.js, TypeScript

목차

• 사용자 정의 훅 로직 조정하기
• 더 많은 컴포넌트에서 사용자 정의 훅 사용하기

✧ 사용자 정의 훅 로직 조정하기

• 이제 App 컴포넌트의 useEffect에 fetchTasks를 의존성으로 추가해야 한다. 왜냐하면 컴포넌트 함수 안에서 설정된 모든 데이터, 또는 함수는 그 함수의 의존성으로서 추가되어야 하기 때문이다.

🚨 무한루프 발생

useEffect(() => {
  fetchTasks();
}, [fetchTasks]);

• 하지만 여기서, 이전에 거론한 문제가 발생한다. 무한루프가 발생하는 것이다. useEffect 내부에서 fetchTasks() 함수를 호출하는데, 그렇게 되면 커스텀 훅 안에 있는 sendRequest 함수를 실행하게 되고, 몇 몇 상태(state)가 새로 설정 되기 때문이다.

커스텀 훅의 상태(state) 설정이 발생하면 커스텀 훅을 사용하는 컴포넌트는 재렌더링 된다.

• 상태(state)를 설정하는 커스텀 훅을 만들고, App 컴포넌트 내부에서 훅을 사용하게 되면, 컴포넌트는 묵시적으로 커스텀 훅이 설정한 상태(state)를 사용하게 된다. 즉, 커스텀 훅에서 구성된 상태(state)가 그 커스텀 훅을 사용하는 컴포넌트에 설정되게 되는 것이라는 뜻이다.

use-fetch.js

const sendRequest = async (taskText) => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch(requestConfig.url, {
      method: requestConfig.method ? requestConfig.method : "GET",
      headers: requestConfig.headers ? requestConfig.headers : {},
      body: JSON.stringify(requestConfig.body)
        ? JSON.stringify(requestConfig.body)
        : null,
    });

    if (!response.ok) {
      throw new Error("Request failed!");
    }

    const data = await response.json();

    applyData(data);
  } catch (err) {
    setError(err.message || "Something went wrong!");
  }
  setIsLoading(false);
};

• 여기 sendRequest 함수에서 setIsLoading 과 setErrer를 호출하면 이는 App 컴포넌트의 재렌더링을 발생시킨다. 왜 그럴까? 이는 App 컴포넌트 안에 있는 커스텀 훅을 사용하는 것이기 때문이다. 그렇게 되면, 재렌더링이 되는 순간 커스텀 훅(useFetch)이 다시 호출되고, 커스텀 훅(useFetch)이 다시 호출되면 sendRequest 함수가 또 다시 재생성되면서 새로운 함수 객체를 반환하고 App 컴포넌트의 useEffect가 재실행된다.

App.js

useEffect(() => {
  fetchTasks();
}, [fetchTasks]);

무한 루프가 발생하는 이유

• 이전의 강의(section-12) 에서 살펴봤듯이 자바스크립트에서 함수는 객체이다. 그리고 내부에 같은 로직을 품고 있더라도 함수가 재생성되면 이는 메모리에서 새로운 객체로 인식되기 때문에 useEffect가 이를 새로운 값으로 받아들이게 되며 기술적으로 같은 함수일지라도 재실행을 유발하게 된다.

useCallback 으로 무한 루프를 방지하기

• 이를 방지하기 위해서는 다시 useFetch 커스텀 훅으로 돌아가서 sendRequest 부분을 수정해야 한다.

const sendRequest = useCallback(async (taskText) => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch(requestConfig.url, {
      method: requestConfig.method ? requestConfig.method : "GET",
      headers: requestConfig.headers ? requestConfig.headers : {},
      body: JSON.stringify(requestConfig.body)
        ? JSON.stringify(requestConfig.body)
        : null,
    });

    if (!response.ok) {
      throw new Error("Request failed!");
    }

    const data = await response.json();

    applyData(data);
  } catch (err) {
    setError(err.message || "Something went wrong!");
  }
  setIsLoading(false);
}, []);

• async/await 구문이 있더라도 문제가 없기 때문에 해당 함수 부분을 useCallback으로 감싸자. 알다시피 useCallback은 의존성 배열이 필요하다. 여기에 무엇을 주입해야 할까?

const useFetch = (requestConfig, applyData) => {
  ...

  const sendRequest = useCallback(
    async (taskText) => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch(requestConfig.url, {
          method: requestConfig.method ? requestConfig.method : "GET",
          headers: requestConfig.headers ? requestConfig.headers : {},
          body: JSON.stringify(requestConfig.body)
            ? JSON.stringify(requestConfig.body)
            : null,
        });

        if (!response.ok) {
          throw new Error("Request failed!");
        }

        const data = await response.json();

        applyData(data);
      } catch (err) {
        setError(err.message || "Something went wrong!");
      }
      setIsLoading(false);
    },
    // ⚡️ --------
    [requestConfig, applyData]
    // ⚡️ --------
  );

  ...
};

• 의존성 배열은 이 안에서 사용되는 모든 것을 나열해야 한다. 이 경우에는 useFetch 커스텀 훅이 매개변수로 받아오는 requestConfig 와 applyData를 추가할 수 있을 것이다. 하지만 이렇게 했을 경우 또 다른 문제가 발생한다. 당연한 이야기겠지만 이 두가지 모두 객체이다. requestConfig는 자바스크립트 기본 객체이고, applyData는 함수인데 자바스크립트에서는 함수 역시 객체이기 때문이다. 다시 App 컴포넌트로 돌아가서 useFetch에 전달한 객체들을 살펴보자.

App.js

const transformTasks = (taskObj) => {
  const loadedTasks = [];

  for (const taskKey in taskObj) {
    loadedTasks.push({ id: taskKey, text: taskObj[taskKey].text });
  }

  setTasks(loadedTasks);
};

const httpData = useFetch(
  {
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
  },
  transformTasks
);

const { isLoading, error, sendRequest: fetchTasks } = httpData;

• 우리는 useFetch에 인자로 전달하는 두 개의 객체가 App 컴포넌트가 재실행될 때마다 재생성되지 않도록 해야 한다. 현재로서는 App 컴포넌트가 재실행될 때마다 재실행되고 있기 때문이다.

const transformTasks = useCallback((taskObj) => {
  const loadedTasks = [];

  for (const taskKey in taskObj) {
    loadedTasks.push({ id: taskKey, text: taskObj[taskKey].text });
  }

  setTasks(loadedTasks);
}, []);

• 먼저, transformTasks 함수를 useCallback으로 래핑한다. 여기에서의 의존성 배열에는 아무 것도 추가하지 않는다. 상태(state) 업데이트를 하는 setTasks 외에는 그 어떠한 것도 외부에서 쓰고 있지 않기 때문이다. 이제 우리는 transformTasks 함수가 변하지 않음을 useCallback을 통해 보증했다.

const httpData = useFetch(
  {
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
  },
  transformTasks
);

• 하지만 이 객체(httpData) 내부에서 첫 번째 인자로 url 을 담아 전달하는 객체는 App 컴포넌트가 재평가할 때마다 재생성되고 있다. 이를 막으려면, useMemo와 같은 것을 이용해서 객체가 변하지 않도록 보증해야 할 것이다. 또는 useMemo를 사용하는 대신 커스텀 훅을 조금 수정하는 방법을 사용해도 될 것이다.

use-fetch.js

const useFetch = (requestConfig, applyData) => {
  ...

  const sendRequest = useCallback(
    async (taskText) => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch(requestConfig.url, {
          method: requestConfig.method ? requestConfig.method : "GET",
          headers: requestConfig.headers ? requestConfig.headers : {},
          body: JSON.stringify(requestConfig.body)
            ? JSON.stringify(requestConfig.body)
            : null,
        });

        if (!response.ok) {
          throw new Error("Request failed!");
        }

        const data = await response.json();

        applyData(data);
      } catch (err) {
        setError(err.message || "Something went wrong!");
      }
      setIsLoading(false);
    },
    // ⚡️ --------
    [requestConfig, applyData]
    // ⚡️ --------
  );

  ...
};

• useFetch 커스텀 훅에서 매개변수로 받는 requestConfig는 훅 자체에서 받지 않고 해당 requestConfig를 사용하는 sendRequest 함수의 인자로 직접 받아온다면 어떨까? 결국 sendRequest 함수 역시 함께 호출되기 때문이다.

const useFetch = (applyData) => {
  ...

  const sendRequest = useCallback(
    // ⚡️ --------
    async (requestConfig) => {
    // ⚡️ --------
      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch(requestConfig.url, {
          method: requestConfig.method ? requestConfig.method : "GET",
          headers: requestConfig.headers ? requestConfig.headers : {},
          body: JSON.stringify(requestConfig.body)
            ? JSON.stringify(requestConfig.body)
            : null,
        });

        if (!response.ok) {
          throw new Error("Request failed!");
        }

        const data = await response.json();

        applyData(data);
      } catch (err) {
        setError(err.message || "Something went wrong!");
      }
      setIsLoading(false);
    },
    // ⚡️ --------
    [applyData]
    // ⚡️ --------
  );

  ...
};

• 이제 requestConfig를 커스텀 훅 자체가 아닌 sendRequest에서 직접 받아올 수 있도록 수정했다. 이렇게 되면 requestConfig를 의존성 배열에 추가하지 않아도 될 것이다. 이제 requestConfig는 외부의 의존성 배열이 아니라, useCallback으로 래핑된 함수의 매개변수가 되었기 때문이다.

App.js

const httpData = useFetch(
  {
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
  },
  transformTasks
);

• 다시 App 컴포넌트로 이동해서 이 url 객체를 제거하도록 하자.

const httpData = useFetch(
  {
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
  },
  transformTasks
);

• 그렇게 되면 transformTasks가 useFetch에 전달되는 유일한 매개변수가 된다.

const httpData = useFetch(transformTasks);
const { isLoading, error, sendRequest: fetchTasks } = httpData;

• 로직이 길어지는 걸 방지하기 위해 간단하게 한 줄로 작성하면 가독성이 더 높아질 것이다.

const { isLoading, error, sendRequest: fetchTasks } = useFetch(transformTasks);

useEffect(() => {
  fetchTasks();
}, [fetchTasks]);

• useEffect에서는 fetchTasks()를 통해서 최종적으로 요청을 전달하고 있다. fetchTasks()가 결국에는 우리가 이전에 useFetch 커스텀 훅 내부에서 설정했던 sendRequest 함수라는 걸 기억해보자. 여기에 우리가 전달하기로 한 매개변수 requestConfig를 fetchTasks()에 직접 전달 해주어야 할 것이다.

useEffect(() => {
  fetchTasks({
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
  });
}, [fetchTasks]);

• 이것은 우리가 할 수 있는 수 많은 방법 중에 하나일 뿐임을 기억하자. 그리고 당연히 데이터를 처리해주는 함수(transformTasks)에도 이와 동일한 작업을 해줄 수 있다.

const transformTasks = useCallback((taskObj) => {
  const loadedTasks = [];

  for (const taskKey in taskObj) {
    loadedTasks.push({ id: taskKey, text: taskObj[taskKey].text });
  }

  setTasks(loadedTasks);
}, []);

const { isLoading, error, sendRequest: fetchTasks } = useFetch(transformTasks);

useEffect(() => {
  fetchTasks({
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
  });
}, [fetchTasks]);

• App 컴포넌트에서 useCallback을 사용하는 것이 너무 번거롭다고 생까할 경우 useCallback을 제거하고 transformTasks 함수를 직접 fetchTasks() 에 전달하는 방법도 있을 것이다.

// ⚡️ --------
const transformTasks = (taskObj) => {
  const loadedTasks = [];

  for (const taskKey in taskObj) {
    loadedTasks.push({ id: taskKey, text: taskObj[taskKey].text });
  }

  setTasks(loadedTasks);
};

// ⚡️ --------
const { isLoading, error, sendRequest: fetchTasks } = useFetch();

useEffect(() => {
  fetchTasks(
    {
      url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
    },
    // ⚡️ --------
    transformTasks
  );
}, [fetchTasks]);

• 그리고, transformTasks를 useEffect를 내부에서 실행할 수 있도록 수정해준다.

const { isLoading, error, sendRequest: fetchTasks } = useFetch();

useEffect(() => {
  const transformTasks = (taskObj) => {
    const loadedTasks = [];

    for (const taskKey in taskObj) {
      loadedTasks.push({ id: taskKey, text: taskObj[taskKey].text });
    }

    setTasks(loadedTasks);
  };

  fetchTasks(
    {
      url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
    },
    transformTasks
  );
}, [fetchTasks]);

• 이렇게 transformTasks 함수를 useEffect 내부에서 실행하게 되면, Effect 함수 안에 남아있는 외부 의존성은 사라지게 된다. 이제 useFetch 커스텀 훅은 의존성이나 어떠한 매개변수 없이도 호출이 가능해진 것이다.

fetchTasks(
  {
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
  },
  transformTasks
);

• 왜냐하면, 우리가 요청에 대한 설정(requestConfig)과 데이터 전송 후 데이터 처리를 해주는 로직(transformTasks)을 직접 보내기 때문이다.

지금까지 두 가지 방법을 사용해서 useEffect의 무한 루프에 대한 솔루션을 적용해봤다. 두 방법 모두 사용 가능한 방법이니 취향대로 선택해서 사용하면 될 것이다.

• 마지막으로 우리가 직접 보내고 있는 transformTasks 데이터 처리 함수도 useFetch 커스텀 훅에서 직접 받지 않고 sendRequest 함수에서 매개변수로 받을 수 있도록 수정해준다.

const useFetch = () => {
  ...

  const sendRequest = useCallback(
    async (requestConfig, applyData) => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch(requestConfig.url, {
          method: requestConfig.method ? requestConfig.method : "GET",
          headers: requestConfig.headers ? requestConfig.headers : {},
          body: JSON.stringify(requestConfig.body)
            ? JSON.stringify(requestConfig.body)
            : null,
        });

        if (!response.ok) {
          throw new Error("Request failed!");
        }

        const data = await response.json();

        applyData(data);
      } catch (err) {
        setError(err.message || "Something went wrong!");
      }
      setIsLoading(false);
    },
    [applyData]
  );

  ...
};

• 그리고 마지막으로 useCallback의 의존성으로 추가했던 applyData를 삭제해준다. useFetch 커스텀 훅에서는 더이상 의존성이 필요하지 않으며, 이는 해당 커스텀 훅이 다루는 모든 데이터는 useCallback으로 래핑된 함수에서 매개변수로 직접 받아오고 있기 때문이다.

const useFetch = () => {
  ...

  const sendRequest = useCallback(
    async (requestConfig, applyData) => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch(requestConfig.url, {
          method: requestConfig.method ? requestConfig.method : "GET",
          headers: requestConfig.headers ? requestConfig.headers : {},
          body: JSON.stringify(requestConfig.body)
            ? JSON.stringify(requestConfig.body)
            : null,
        });

        if (!response.ok) {
          throw new Error("Request failed!");
        }

        const data = await response.json();

        applyData(data);
      } catch (err) {
        setError(err.message || "Something went wrong!");
      }
      setIsLoading(false);
    },
    // ⚡️ --------
    []
    // ⚡️ --------
  );

  ...
};

• 저장하고, 새로고침 해보면 동일하게 작업이 문제 없이 돌아가고 있다는 걸 알 수 있다.

  
  

✧ 더 많은 컴포넌트에서 사용자 정의 훅 사용하기

• 마지막으로 NeweTasks 컴포넌트에 커스텀 훅을 적용해보려고 한다. 먼저 NewTasks 컴포너트에 useFetch를 import 해온 후,

import useFetch from "../../hooks/use-fetch";

• useFetch를 호출한다.

useFetch();

• App 컴포넌트에서 작성했던 것처럼 NewTasks 컴포넌트에서 사용하고자 하는 커스텀 훅(useFetch)의 상태(state)와 함수를 구조 분해 할당으로 추출한다.

const { isLoading, error, sendRequest: sendTaskRequest } = useFetch();

• 이제 enterTaskHandler 함수가 트리거 될 때마다 해당 커스텀 훅을 호출하도록 작성해준다. 즉, 매번 TaskForm 컴포넌트에서 폼이 제출될 때마다 enterTaskHandler 함수가 트리거 되고, 내부의 함수sendTaskRequest 함수가 호출될 수 있도록 하는 것이다.

const enterTaskHandler = async (taskText) => {
  sendTaskRequest();

  ...
};

• 먼저, App 컴포넌트에서 커스텀 훅에 전달하였던 것과 동일하게 sendTaskRequest 함수 내부에 적합한 매개변수들을 전달해줘야 한다. 첫 번째 인자로는, response 를 할 때 필요했던 속성들이 담긴 객체가 필요할 것이다.

const enterTaskHandler = async (taskText) => {
  sendTaskRequest({
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
  });

  ...
};

• 여기서 App 컴포넌트와는 다르게 "POST" 요청을 보낼 것이기 때문에, "POST" 요청을 보낼 때 필요한 속성(method, headers, body) 또한 포함해서 작성해주어야 한다.

const enterTaskHandler = async (taskText) => {
  sendTaskRequest({
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
  });

  ...
};

• body 속성의 값은 JSON.stringify({text: taskText})로 변환하여 보냈지만, 이미 커스텀 훅 내부에서 JSON 변환을 해주고 있으므로 객체 형태로 작성해서 보내준다.

const enterTaskHandler = async (taskText) => {
  sendTaskRequest({
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: { text: taskText },
  });

  ...
};

• 이제 useFetch 커스텀 훅에서 받을 첫 번째 인자인 requestConfig 객체가 완성되었다. 두 번째로 전달할 인자는 응답 데이터를 받아서 처리해주는 함수 applyData이다. NewTasks 컴포넌트에서 데이터를 처리하는 방식을 살펴보면,

const data = await response.json();
// ⚡️ --------
const generatedId = data.name;
const createdTask = { id: generatedId, text: taskText };
props.onAddTask(createdTask);
// ⚡️ --------

• 이 로직들이 해당 역할을 담당하고 있는 걸 알 수 있다. generatedId 는 Firebase 가 자동으로 만들어주는 name으로 id를 생성해준 것이고, 이 id를 비롯하여 폼으로 부터 전달받은 taskText와 함께 포함하고 있는 것이 createdTask 객체이다. 그리고 이것들을 props.onAddTask(createdTask)로 호출해서 넣어주어야 한다.

데이터 처리 함수 만들기

const createTask = (taskData) => {
  const generatedId = data.name;
  const createdTask = { id: generatedId, text: taskText };
  props.onAddTask(createdTask);
};

• createTask 함수는 앞의 로직들을 담은 새로운 함수이다. 이 함수에서는 taskData를 인자로 받도록 작성해준다. 그리고 그 인자에 따라 로직들을 수정해준다.

const createTask = (taskData) => {
  const generatedId = taskData.name;
  const createdTask = { id: generatedId, text: taskText };

  props.onAddTask(createdTask);
};

• 그리고,sendTaskRequest의 두 번째 인자로 해당 함수(createTask)를 포인터한다.

const enterTaskHandler = async (taskText) => {
  sendTaskRequest(
    {
      url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
      method: "POST",
      body: { text: taskText },
      headers: {
        "Content-Type": "application/json",
      },
    },
    createTask
  );
};

• 해당 로직에서 역시 useCallback을 사용해야 할지 고민되겠지만 여기에서는 해당 훅을 사용하지 않아도 된다. App 컴포넌트처럼 useEffect를 사용해서 sendRequest를 호출하는 것이 아니라, enterTaskHandler에서만 sendTaskRequest를 호출하고 있기 때문이다. 그리고 이 요청은 컴포넌트가 재평가되어도 전송되지 않으며, 단지 물리적으로 우리가 폼을 제출했을 때에만 함수가 재실행될 것이다. 이는 App 컴포넌트와 분명 다른 점이다.

taskText 를 전달하는 방법

• 우리는 여기서 새로운 이슈를 마주하게 된다. createTask 함수를 보면,

const createTask = (taskData) => {
  const generatedId = taskData.name;
  const createdTask = { id: generatedId, text: taskText };

  props.onAddTask(createdTask);
};

• text 속성 값으로 전달해야 하는 taskText 부분이 제대로 전달되지 않았음을 알 수 있다. 폼에서 HTTP 요청을 통해 전달된 텍스트 부분이 빠져있는 것이다. 이 taskText는 enterTaskHandler 함수의 매개변수를 통해 받아오고 있다. 그렇다면 어떻게 이를 전달해야 하는 걸까? 이 taskText를 사용하기 위해서는 두 개의 선택지가 있다. 첫 번째로는

const enterTaskHandler = async (taskText) => {
  const createTask = (taskData) => {
    const generatedId = taskData.name;
    const createdTask = { id: generatedId, text: taskText };

    props.onAddTask(createdTask);
  };

  sendTaskRequest(
    {
      url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
      method: "POST",
      body: { text: taskText },
      headers: {
        "Content-Type": "application/json",
      },
    },
    createTask.bind(null, taskText)
  );
};

• createTask 함수를 통째로 가져와서 enterTaskHandler 함수 안에서 정의하는 방법이 있다. 이는 자바스크립트 스코프에 따라 함께 작동되고, taskText를 직접 받기 때문에 더는 문제가 되지 않을 것이다. 이처럼 복잡한 중첩 구조를 피하기 위해서 다른 방법을 사용해도 된다.

const createTask = (taskData, taskText) => {
  const generatedId = taskData.name;
  const createdTask = { id: generatedId, text: taskText };

  props.onAddTask(createdTask);
};

• 이전처럼 각 함수들을 따로 둔 다음에, taskText를 createTask 함수의 두 번째 인자로 추가해주는 것이다. 따라서 커스텀 훅에는 2개의 매개변수가 필요하게 된다.

const enterTaskHandler = async (taskText) => {
  sendTaskRequest(
    {
      url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
      method: "POST",
      body: { text: taskText },
      headers: {
        "Content-Type": "application/json",
      },
    },
    createTask
  );
};

• 현재 createTask 함수를 호출하는 커스텀 훅은 하나의 매개변수만을 전달한다.

use-fetch.js

applyData(data);

• 이를 해결하기 위해선 자바스크립트 내부에 있는 메소드인 bind()를 사용하면 된다.

bind() 메소드 사용하기

• 우리가 sendTaskRequest에 전달하려는 createTask에 bind() 메소드를 호출한다. 그러면 bind() 메소드는 함수를 사전에 구성할 수 있도록 해준다.

const enterTaskHandler = async (taskText) => {
  sendTaskRequest(
    {
      url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
      method: "POST",
      body: { text: taskText },
      headers: {
        "Content-Type": "application/json",
      },
    },
    createTask.bind()
  );
};

• 우리가 sendTaskRequest 에 전달하려는 creatTask 에 bind()를 호출해준다. 그러면 bind 메소드는 함수를 사전에 구성해줄 것이다.

  호출 즉시 함수가 실행되지는 않는다. 이것은 자바스크립트의 기본적인 메소드이므로 어떤 함수에 대해서도 사전에 구성하기 위해서는 bind()를 사용할 수 있다.

const enterTaskHandler = async (taskText) => {
  sendTaskRequest(
    {
      url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
      method: "POST",
      body: { text: taskText },
      headers: {
        "Content-Type": "application/json",
      },
    },
    createTask.bind(null)
  );
};

• bind() 메소드에 보내는 첫 번째 인자는 실행이 예정된 함수에서 this 예약어를 사용하게 만드는 것이지만 여기서는 필요가 없기 때문에 null로 설정한다.

const enterTaskHandler = async (taskText) => {
  sendTaskRequest(
    {
      url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
      method: "POST",
      body: { text: taskText },
      headers: {
        "Content-Type": "application/json",
      },
    },
    createTask.bind(null, taskText)
  );
};

• bind() 메소드에 보내는 두 번째 인자는 호출 예정인 함수(createTask)가 전달받는 첫 번째 인자여야만 한다.

const createTask = (taskData, taskText) => {
  ...
};

• 즉, 이렇게 taskText를 전달하려면 bind() 메소드의 두 번째 인자에 taskText를 전달해서 제출된 폼(enterTaskHandler)에서 taskText를 찾도록 만들면 된다.

const enterTaskHandler = async (taskText) => {
  sendTaskRequest(
    {
      url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
      method: "POST",
      body: { text: taskText },
      headers: {
        "Content-Type": "application/json",
      },
    },
    createTask.bind(null, taskText)
  );
};

• 함수가 실제로 호출되는 useFetch 에서 전달되는 다른 인자의 경우 간단하게 이 매개변수의 목록 끝에 추가하여 처리하면 된다.

use-fetch.js

const sendRequest = useCallback(async (requestConfig, applyData) => {
  ...
    const data = await response.json();
    applyData(data);
  ...
}, []);

• 이것으로 커스텀 훅의 applyData 의 유일한 인자로 전달되는 데이터는 createTask의 두 번째 인자로 추가된다. 이제 호출이 되면, 이는 우리가 원하는 모든 데이터를 받게 된다.

정리

• 지금까지 HTTP 요청을 전송하는 커스텀 훅의 생성 방법에 대해 학습했다. 확실히 복잡하고 어려운 부분이 있었지만, 이런 방식으로 커스텀 훅을 사용하게 된다면 중복되는 로직 특히 상태(state) 설정과 같은 로직들을 커스텀 훅으로 아웃소싱할 수 있다는 점에서 필요한 작업임을 알 수 있었다. 또한 이를 서로 다른 컴포넌트에 적용해서 다양한 종류의 요청을 보내고, 응답 데이터에 대해 다양한 작업을 처리하며 로딩 및 오류 상태를 공유 로직을 통해 최적화할 수 있었다.

✦ 출처

---

🚨 해당 포스팅은 Udemy의 ⌜React 완벽 가이드⌟ 강의를 베이스로 한 기록입니다.
✍🏻 강의 git repo 바로가기