1010 TIL-U

Section 16 커스텀 리액트 HOOK 빌드

커스텀이라 음 나 예전에, 로직프로 쓸때 베이스랑 키 코드 커스터마이징 한거 말고, 해본게 없는것 같다.(여담으로, 사실 일반 pop장르라면 커스터마이징 따로 안해도 되는데, 내가 ㅋㅋㅋㅋㅋㅋㅋ 밴드 작곡가로 인생을 성공해보게쒀. 했지만, 밴드 커스터마이징 진짜 어렵다 흑. 다음달엔 꼭 짬내서 건반 코드 짜야지. 아냐, 코드 얘기하지마. 코드에이어서, 취미도 코드니,,)
또 생각해보면 IOS 업데이트 되면, 내 배경화면이나 설정들을 변경한다.

자 여기서 잠깐!

위에 내가, 설정을 변경한다..고 했는데, 이게 오늘의 핵심!

TIL1)커스텀이란?

리액트에서 커스텀(Custom)이란, 기존의 기능을 재사용할 수 있게 하되, 그 기능을 더 유연하게 하거나 구체적인 요구사항에 맞춰 변경하는 것을 의미한당 예를 들어, 기존 리액트 Hook을 조합하거나 확장하여 우리만의 로직을 추가하는 경우를 커스텀 Hook이라고 할 수 있다.

자자! 우리만의 로직을 추가한다잖아? 이제 알겠니 ㅇㅇ

TIL2)리액트 Hook이란?

그럼 리액트에서 Hook이 뭔지 알면 '커스텀' + '훅' 을 알수 있지 않겠늬

리액트 Hook은 함수형 컴포넌트에서 상태를 관리하고, 사이드 이펙트를 처리하는 방법을 제공한다. 가장 흔히 사용되는 기본 Hook은 useState, useEffect가 있으며, 커스텀 Hook은 이러한 기본 Hook들을 활용하여 반복되는 로직을 추상화하여 재사용 가능한 코드로 만드는 방식이다.

TIL3)커스텀 Hook

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

위 useFetch 커스텀 Hook은 API 요청 로직을 추상화한 것. 컴포넌트에서 반복되는 요청, 로딩, 에러 핸들링을 간단하게 처리할 수 있게 만든다. 특정 URL로부터 데이터를 가져와 해당 데이터(data), 로딩 상태(loading), 에러 여부(error)를 반환함.

TIL4) 커스텀 훅 사용

function MyComponent() {
  const { data, loading, error } = useFetch("https://api.example.com/data");

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

여기서는 useFetch Hook을 사용하여 데이터를 비동기적으로 불러오는 로직을 깔끔하게 관리할 수 있다. 이를 통해 코드를 훨씬 간결하고, 반복되는 작업을 줄이며, 관리가 용이한 구조로 만드는거다,,

질문거리!

1. 커스텀 Hook에서 상태 관리 패턴

useFetch에서 useState로 여러 개의 상태(data, loading, error)를 관리하고 있는데, 더 효율적으로 상태를 관리할 수 있는 다른 방법이 있을까요? 예를 들어, useReducer를 사용하면 더 나을까요?

2. 재사용 가능한 Hook 작성 시 고려사항

커스텀 Hook을 만들 때 일반적으로 어떤 상황을 고려해야 하나요? 다른 컴포넌트에서 쉽게 재사용할 수 있도록 설계하는 데 필요한 베스트 프랙티스는 무엇일까요?