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

목차

• 좀 더 현실적인 예시를 위해
• 사용자 정의 Http 훅 빌드하기
• 사용자 정의 Http 훅 사용하기

✧ 좀 더 현실적인 예시를 위해

• 먼저 이전에 HTTP 요청을 전송하는 것에 대한 방법을 학습한 적이 있을 것이다. 이때 사용했던 Firebase의 realtime database의 URL 주소가 필요하니, 그 주소를 긁어와 현재의 어플리케이션에서 fetch를 통해 사용하고 있는 URL 주소를 대체하도록 하자. 물론 Firebase 가 요구하는 조건 /저장하고자 하는 노드의 이름.json을 URL 주소 뒤에 붙이는 걸 잊지 말자.

• 이 어플리케이션은 어떻게 돌아갈까? 먼저 URL을 Firebase의 realtime database의 URL 주소로 수정해주고 저장한 뒤, 새로고침을 해보자.

• "Task 1"을 추가하고 "Add Button"을 누른 뒤 연결한 Firebase의 realtime database 로 이동하면

• 내가 설정한 새로운 노드(tasks)가 생성되었음을 확인할 수 있다.

커스텀 훅으로 가져올 수 있는 공통된 로직 찾아보기

• 현재 어플리케이션의 데이터(Task)를 렌더링하는 컴포넌트 로직들을 보면 Task 데이터를 fetch API 를 통해 Firebase의 database에 "POST" 하고, 이를 다시 "GET" 해오는 방식을 사용한 걸 알 수 있다. HTTP 를 전송하고 오류를 처리하고 로딩 상태(state)도 관리하며 도착한 데이터를 변경하거나 표시하는 모든 작업이 fetch API를 통해 이루어진 것이다. 여기에는 다양한 컴포넌트가 관리해주고 있지만 가장 중요한 것은 App 컴포넌트로 Task 데이터를 가져오는 fetchTask 함수가 있는 부분이다.

App.js

const fetchTasks = async (taskText) => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch(
      "https://react-http-6b4a6.firebaseio.com/tasks.json"
    );

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

    const data = await response.json();

    const loadedTasks = [];

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

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

• 이 fetchTasks 함수는 useEffect로 인해 실행되거나 App 컴포넌트가 반환하는 Tasks 컴포넌트에 props로 전달되어 해당 컴포넌트 내부에서 버튼이 클릭되거나 하면서 실행되고 있다. 이렇게 App 컴포넌트 안에서 fetchTasks 함수가 트리거 되고 있다.

NewTask.js

const enterTaskHandler = async (taskText) => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch(
      "https://react-http-6b4a6.firebaseio.com/tasks.json",
      {
        method: "POST",
        body: JSON.stringify({ text: taskText }),
        headers: {
          "Content-Type": "application/json",
        },
      }
    );

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

    const data = await response.json();

    const generatedId = data.name; // firebase-specific => "name" contains generated id
    const createdTask = { id: generatedId, text: taskText };

    props.onAddTask(createdTask);
  } catch (err) {
    setError(err.message || "Something went wrong!");
  }
  setIsLoading(false);
};

• NewTask 컴포넌트도 fetch API를 사용하는 로직 함수 enterTaskHandler 를 가지고 있다. enterTaskHandler 함수는 App의 fetchTasks 함수처럼 HTTP 요청을 보내고 있지만, Firebase에 데이터를 저장하기 위한 "POST" 요청이 전송된다. 이 enterTaskHandler 함수는 TaskForm 컴포넌트가 최종적으로 제출될 때 트리거 되는 함수이다. 즉, TaskForm 컴포넌트는 NewTask 컴포넌트로부터 props로 함수를 받아 해당 함수에서 버튼이 클릭되거나 인풋에 입력된 값이 검증되는 시점에서 enterTaskHandler가 실행되는 것이다.

정리

• 이 두가지의 컴포넌트(App, NewTask)를 살펴보면서, fetch API를 사용해서 HTTP 요청을 하는 로직이 최소 하나 이상의 커스텀 훅을 추가할 수 있다는 걸 알 수 있었다. 이 두개의 HTTP 요청을 하는 함수가 모두 동일한 로직을 가진 것은 아니지만 크게 두 가지의 비슷한 종류의 작업을 하고 있을 것이다. 저장할 데이터를 전송하는 부분과, 데이터를 가져오기 위한 요청을 보내는 부분 말이다. 세밀하게 살펴보면 응답에 대한 변환 로직은 조금 다른 형태이지만 실제로 코드가 유사한 부분은 상당수 존재한다. 로딩과 오류 상태(state)를 관리하고 설정하는 것과 오류를 다루는 로직 역시 동일하다. 이처럼 비슷한 코드가 존재하고 있기 때문에 이 부분의 로직을 별도의 함수에 아웃소싱하는 것을 고려해볼 수 있을 것이다. 지금까지 배운 커스텀 훅을 통해서 말이다.

✧ 사용자 정의 Http 훅 빌드하기

• hooks 폴더를 생성하고 사용할 커스텀 훅 use-fetch.js 파일을 만든다.

const useFetch = () => {};
export default useFetch;

• 그리고 먼저 useFetch 커스텀 훅으로 아웃소싱할 로직(App.js)을 확인한다.

App.js

const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);

const fetchTasks = async (taskText) => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch(
      "https://react-http-6b4a6.firebaseio.com/tasks.json"
    );

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

    const data = await response.json();

    const loadedTasks = [];

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

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

• 위의 로직들을 살펴보면, 이것은 로딩과 오류 상태(state)에 대한 것임과 동시에 응답을 보내고 해당 응답을 평가하는 코드이기도 한 걸 알 수 있다. 그리고 이 모두가 아웃소싱 되어야 한다. 해당 fetchTasks 함수 전체와 isLoading, error 의 상태(state) 코드까지 모두 복사해서 useFetch 커스텀 훅 함수 안에 붙여 넣어준다.

const [tasks, setTasks] = useState([]);

tasks 상태(state)는 App 컴포넌트에만 사용하는 것이기 때문에 이를 제외하고 모두 복사해서 useFetch 커스텀 훅에 넣어주자.

use-fetch.js

const useFetch = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const sendRequest = async (taskText) => {
    setIsLoading(true);
    setError(null);
    try {
      const response = await fetch(
        "https://react-http-6b4a6.firebaseio.com/tasks.json"
      );

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

      const data = await response.json();

      const loadedTasks = [];

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

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

  return {
    isLoading: isLoading,
    error: error,
    sendRequest: sendRequest,
  };
};

• App 컴포넌트에서 긁어온 fetchTasks 함수의 이름을 sendRequest로 수정한다. 이렇게 수정한다면 내부에 있는 로직을 좀 더 일반화시킬 수 있다. 이 useFetch 커스텀 훅은 데이터 fetch 에만 국한되어 데이터를 가져오는 역할만 하는 것이 아니라, 데이터를 보내는 역할도 하기 때문에 조금 더 이름을 일반화 시키는 것이다. 이렇게 수정하게 되면 훅의 재사용성을 높이고 여러 작업에도 사용할 수 있다는 걸 명시적으로 알 수 있게 된다.

useFetch 커스텀 훅에 다수의 매개변수 추가하기

• useFetch 커스텀 훅은 어떤 종류의 요청이든 받아서 모든 종류의 URL로 보낼 수 있어야 하고, 또한 어떤 데이터든 변환을 할 수 있어야 한다. 동시에 로딩(isLoading)과 오류(error) 상태(state)를 관리하고, 모든 과정을 동일한 순서대로 실행해야만 한다. 그리고 이런 유연한 커스텀 훅을 만들기 위해서는 몇 가지의 매개변수가 필요하다.

App.js

const response = await fetch(
  "https://react-http-6b4a6.firebaseio.com/tasks.json"
);

NewTask.js

const response = await fetch(
  "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
  {
    method: "POST",
    body: JSON.stringify({ text: taskText }),
    headers: {
      "Content-Type": "application/json",
    },
  }
);

• 먼저, 이 fetch API 의 response 로직 부분을 보면 URL 을 비롯하여, 메소드, body, headers 등 유연성을 갖추어야 함을 알 수 있다. NewTask 컴포넌트에서 사용하는 HTTP 요청은 "POST"이기 떄문에 fetch API를 요청할 때 URL 뿐만 아니라, 두 번째 인자에 메소드, body, headers 가 필요하기 때문이다. 따라서 해당 설정을 위한 매개변수(requestConfig)를 추가한다.

const useFetch = (requestConfig) => {
  ...
}

• 매개변수 requestConfig는 URL을 포함해서 어떤 종류의 설정 사항도 포함할 수 있는 객체 형태여야만 할 것이다.

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

    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);
};

• 따라서 URL 주소와 설정 객체 등 하드 코딩된 것을 제거한 뒤, URL은 requestConfig.url 그리고 설정 객체는 각각 method는 requestConfig.method, headers는 requestConfig.headers, body는 JSON.stringify(requestConfig.body)로 할당한다. 이렇게 해야, 외부 컴포넌트에서 커스텀 훅을 호출할 때 URL 주소를 담은 것과 해당 설정 속성을 가진 객체(requestConfig)를 전달할 수 있기 때문이다. 이렇게 되면, "GET"으로 URL만 요청하는 로직 뿐만 아니라, "POST"로 요청할 때도 설정 객체를 넣어서 사용할 수 있게 된다.

const data = await response.json();

• 당연하게도 이런 방식으로 response을 변환하기도 해야 한다. JSON 데이터만을 다룰 것이기 때문에, 이 부분은 수정하지 않고 그대로 둔다.

const loadedTasks = [];

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

setTasks(loadedTasks);

• 하지만 위의 코드처럼 데이터를 최종적으로 처리하는 부분은 너무 구체적인 부분(GET 요청만을 위한 데이터 처리)이기 때문에 커스텀 훅에 포함되서는 안될 것이다. 대신에 여기에 데이터를 가져오면, useFetch 커스텀 훅을 사용하는 컴포넌트로부터 얻은 함수를 실행해서 그 함수에 데이터를 넘겨주는 방식을 사용할 것이다. 이렇게 하면 세부적인 변환 과정은 커스텀 훅이 사용되는 컴포넌트 안에서 정의할 수 있게 된다. 따라서 위의 코드를 커스텀 훅 내부에서 실행하지 않고, 매개변수로 받은 함수로 처리해줄 수 있도록 한다.

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

• 해당 로직(데이터 처리)을 처리할 함수를 applyData 라는 이름의 매개변수로 받기로 한다. 요청을 통해 데이터를 가져온 다음 applyData 매개변수 함수를 호출해서 데이터를 전달한다.

const data = await response.json();

applyData(data);

• 즉, useFetch 커스텀 훅에서 applyData 함수로 데이터를 전달한 것이며, applyData 함수 안에서 무엇이 발생하는지에 대해서는 applyData 커스텀 훅을 사용하는 컴포넌트에서 정의할 수 있게 되었다. 이제 useFetch 커스텀 훅에서 재사용과 재사용 로직을 준비했다. 하지만 데이터를 사용하는 세부적인 과정은 해당 커스텀 훅을 사용하는 컴포넌트에서만 정의할 수 있도록 했다. 그리고 이렇게 분리를 해주는 것이 이전보다는 조금 더 합리적으로 보인다. useFetch 커스텀 훅에는 isLoading과 error 같은 상태(state)와 HTTP 통신을 하는 sendRequest 함수가 포함되었다. 하지만 이것들은 결국 useFetch 커스텀 훅을 사용하는 컴포넌트에 필요한 것들이다.

컴포넌트에서 커스텀 훅의 상태(state)와 함수에 접근하기

• useFetch 커스텀 훅을 사용하는 컴포넌트들은 로딩(isLoading)과 오류(error) 상태에 대해 접근할 수 있어야 하고, sendRequest 함수에도 접근할 수 있어야 한다. 그래야지 해당 커스텀 훅을 사용하는 컴포넌트들이 이것들을 활성화하고 요청 또한 보낼 수 있기 때문이다.

const useFetch = (requestConfig, applyData) => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const sendRequest = async (taskText) => {
    ...
  };

  return {}
};

• 따라서 useFetch 함수 내부의 가장 하단으로 이동하여 외부 컴포넌트들이 접근하여 사용할 수 있도록 상태(state)와 함수를 반환한다. 이전의 학습에서 언급했던 것처럼 커스텀 훅은 숫자나 문자열, 배열, 객체 등과 같이 무엇이든 반환할 수 있다. 이번에는 여러 개의 값들을 반환할 예정이기 때문에 객체의 형태로 반환할 것이다.

return {
  isLoading: isLoading,
  error: error,
  sendRequest: sendRequest,
};

• 객체 안에 반환할 상태(isLoading, error)와 함수(sendRequest)를 반환한다. 객체의 키와 값에서 왼쪽의 키는 속성의 이름을 말하고, 오른쪽의 값은 말 그대로 값을 의미한다.

return {
  isLoading,
  error,
  sendRequest,
};

• 물론, 객체 내부의 좌측의 속성 이름과 우측의 값의 이름이 동일하기 때문에 모던 자바스크립트의 편의 기능을 통해 생략하여 사용할 수도 있다. 이전에 작성했던 코드와 같은 결과를 얻으면서 코드가 좀 더 짧아지는 효과이다. 그리고 이렇게 생략을 하여 사용해도, 이전의 긴 문법으로 변환한 뒤 사용되기 때문에 간단하게 생략하여 사용하는 것이 더 좋을 것이다.

✧ 사용자 정의 Http 훅 사용하기

• 이제 App 컴포넌트로 돌아와 커스텀 훅(useFetch)을 사용해보자.

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

• 먼저 사용할 useFetch 훅을 import 해온 뒤 호출해오자.

useFetch();

• 여기에는 두 개의 인자(매개변수)를 전달해주어야 한다. 이전에 우리가 useFetch에서 외부 컴포넌트로부터 받기로 한 그 매개변수들 말이다.

useFetch(
  {
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
  },
  데이터 처리 함수
);

• 먼저 useFecth 내부에서 fetch() 안에 넣어줄 URL과 method, headers, body 등의 속성을 포함하고 있는 requestConfig 에 보낼 객체와 데이터를 처리해주는 함수(applyData)를 전달해야 한다. requestConfig 에 보내는 객체는 내부에 필요한 속성들이 포함되어 있어야 한다. 커스텀 훅 내부에서 URL 과 method, headers, body 등의 속성에 접근하기 때문이다. 따라서 App 컴포넌트의 url 속성에 해당 문자열 주소를 할당해준다. 그렇다면 나머지 method, headers, body 속성은 왜 넣어주지 않을까?

App 컴포넌트 내부에서 requestConfig에 보내는 객체에는 왜 URL 만 포함시켰을까

• useFetch 커스텀 훅을 사용하고자 하는 두개의 컴포넌트의 차이점을 확인해보자. App 컴포넌트에서는 데이터를 그저 가져오기만 하면 되기 때문에 "GET" 요청으로만 처리가 가능하고, 여기에는 method, headers, body 등이 필요하지 않다. 반면, NewTask 컴포넌트는 "POST" 요청으로 데이터를 서버에 보내야 하고 여기에는 method, headers, body 의 속성이 필요하다. 이렇게 필요한 속성들이 다르기 떄문에 우리는 유연성을 조금 더 갖춰야할 필요가 있다. 모든 컴포넌트가 더미 데이터를 보낼 필요가 없기 때문이다. 이제 다시 커스텀 훅으로 돌아가 fetch()의 Request 부분을 유연성을 갖춘 로직으로 수정해야 한다.

커스텀 훅의 fetch() 두 번째 속성에 유연성 부여하기

const response = await fetch(requestConfig.url, {
  method: requestConfig.method,
  headers: requestConfig.headers,
  body: JSON.stringify(requestConfig.body),
});

• useFetch 커스텀 훅으로 돌아와 response 변수의 fetch() 로직을 수정한다.

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,
});

• method의 경우에는 requestConfig.method가 적용 되었는지를 확인하고(?) 설정되었을 때만 requestConfig.method를 부여하고 아닐 때(:)는 "GET"으로 요청을 보낼 수 있도록 수정한다.
• headers의 경우에는 requestConfig.headers가 적용 되었는지를 확인하고(?) 설정되었을 때만 requestConfig.headers를 부여하고 아닐 때(:)는 빈 객체({})를 할당한다.
• body의 경우에는 JSON.stringify(requestConfig.body)의 설정 상태를 확인하고(?) 설정되었을 때만 JSON.stringify(requestConfig.body)를 부여하고 아닐 때(:)는 null로 할당한다. 이렇게 수정함으로써 커스텀 훅은 충분한 유연성을 갖추게 되었다.

useFetch(
  {
    url: "https://react-http-9914f-default-rtdb.firebaseio.com/tasks.json",
  },
  데이터 처리 함수
);

• 다시 App 컴포넌트로 돌아오자. 이제 App 컴포넌트에서 호출한 useFetch가 이런 형태의 객체를 전달할 수 있게 되었다. 가독성을 위해 데이터 처리 로직을 useFetch 위에 작성한다. 이제 남은 건 데이터를 처리하는 함수인 두 번째 인자를 준비하는 일이다.

const transformTasks = (taskObj) => {};

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

• 먼저 데이터 처리를 담당할 함수의 이름을 transformTasks 라고 한다. 여기에는 taskObj를 매개변수로 받는다. 이 transformTasks 함수 내부에 useFetch 안에서 사용했던 즉, 이전에 제거했던 그 데이터 처리 로직을 그대로 복사해서 붙여넣기 해준다.

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

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

  setTasks(loadedTasks);
};

• 그리고 여기에서 taskObj 인자를 data 로 표기된 자리에 대신 넣어주고,

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

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

  setTasks(loadedTasks);
};

• for in 문을 통해서 읽어와서 객체 형태로 loadedTasks 이라는 빈 배열에 push 해준다. 이제 Firebase에서 받는 객체의 모든 작업은 프론트엔드에서 필요한 구조와 유형을 갖는 객체로 변환될 것이다. 그리고 setTasks 상태(state) 업데이트 함수에 전달한다. 이것으로 useFetch() 의 두 번째 인자인 데이터 처리 함수가 준비되었다.

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

• transformTasks 이 함수는 커스텀 훅이 응답을 받게 되면 알아서 호출될 것이다. 이런 방법이 좋은 이유는 이렇게 하면 주요 로직은 커스텀 훅에 아웃소싱 할 수 있게 되고 로직에 대한 데이터는 그 데이터가 필요한 컴포넌트에 위치하게 되기 때문이다.

useFetch 요청 활성화하기

• useFetch 커스텀 훅은 매개변수만 받는 것이 아니라 무언가를 반환하기도 한다. isLoading과 error 상태(state)가 있는 객체를 반환하며, sendRequest 함수의 포인터 역시 반환한다. 그리고 useFetch 요청을 활성화하기 위해서는 호출이 필요하다. 따라서 App 컴포넌트에서 httpData란 이름으로 useFetch를 호출할 수 있도록 하고,

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

• 이제 httpData를 포인터해서 구조를 분해하는 로직을 작성한다.

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

• 그리고 isLoading, error, sendRequest를 객체 구조 분해 할당을 통해 추출한다.

const { isLoading, error, sendRequest } = httpData;

• 그리고 여기에서 App 컴포넌트에서 사용할 별칭을 생성할 것인데, 자바스크립트에서 이 분해 문법에 콜론(:)을 추가하면 다른 이름을 부여할 수 있기에 이 방법을 사용해서 새로운 이름을 부여한다.

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

• sendRequest의 새로운 이름으로 fetchTasks를 설정한다. 이는 커스텀 훅 내부의 sendRequest 함수를 가리키고 있는 포인터의 이름인 것이다. 단순히 이것을 사용할 App 컴포넌트 함수 안에서 sendRequest 함수를 가리키는 이름만 바꾼 것이다.

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

• 그렇게 되면, 기존에 HTTP 요청을 담당했던 함수 이름인 fetchTasks()를 그대로 사용할 수 있게 되고, 아래의 useEffect 훅 로직을 수정할 필요도 없을 것이다.

useEffect의 의존성을 추가 문제

• 커스텀 훅으로 HTTP 요청을 하는 주요 로직들을 아웃소싱하면서 useEffect 훅의 의존성 배열에 무언가 오류가 있음을 경고하는 걸 알 수 있다. 이전에 사용하던 fetchTasks 함수에서는 문제가 되지 않던 것이다. 이전에는 상태 갱신 함수만 호출하고 있었기 때문에 의존성 배열을 굳이 주입하지 않아도 상관 없었기 때문이다. 하지만 fetchTasks 함수, 즉 내부의 sendRequest 함수는 커스텀 훅 내부에 위치해있고, 이를 추출해서 사용한 것이기 때문에 useEffect는 이 sendRequest 함수 안에서 무슨 일이 일어나고 있는지를 알지 못한다. 때문에 fetchTasks 함수가 변화할 때마다 useEffect를 재실행하려면 fetchTasks를 의존성으로 추가해야 한다.

🚨 무한루프 발생

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

• 하지만 이는 현재로서는 큰 문제가 될 수 있다. 현 시점에서는 무한 루프가 만들어지고 에러 상황을 발생시키기 때문에 이는 좋은 솔루션이 될 수 없기 때문이다. 그러니 나중에 다시 논의하기로 하고, 다시 의존성을 제거한다.

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

정리

• 지금까지 커스텀 훅을 통해서 App 컴포넌트를 재구축했다. 이제 isLoading과 error 상태에 접근이 가능하고, 이것들은 Tasks 컴포넌트 내부에 있는 자식 컴포넌트인 Task 컴포넌트에 전달된다. fetchTasks 함수에도 접근 가능하지만 요청을 보내거나 오류를 처리하는 부분은 커스텀 훅의 일부가 되었다.

• 저장하고, 새로고침을 해오면 현재 작업을 모두 불러오며 작업을 추가하는 기능도 동일하게 작동하는 걸 알 수 있다.
  
  

✦ 출처

---

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