React Hooks

React Hooks

기존 규칙

1. 컴포넌트 함수 내에서만 훅들을 불러야 한다.
2. Top Level에서만 훅들을 부를 수 있다.

커스텀 훅

사용이유

컴포넌트 내에 들어가 코드를 감싸고 재사용하기 위함이다.

상황 1.

useEffect 내에 있는 Http 통신 코드를 다른 컴포넌트 내에서도 사용하고 싶을때...

1. 컴포넌트 안 또는 다른 훅 안에서 부를 수 있다.
2. 커스텀 훅들은 파일로 분리해서 처리하고 함수 이름을 use~~~로 시작해준다.

./hook/useFetch

function useFetch(fetchFn) {
  // 원하는 값을 파라미터로 넣어줘서 다양한 컴포넌트에서 재사용 가능하다.
  // 여기서 fetchFn은 data를 통신 후 불러오는 함수이다. -> 해당 함수는 컴포넌트마다 달라질 수 있기 때문에 파라미터로 전달	
  const [isFetching,setIsFetching] = useState();
  const [error,setError] = useState();
  const [fetchedData,setFetchedData] = useState();
  
  useEffect(() => {
    async function fetchData() {
      setFetchedData(true);
      try {
        const data = await fetchFn();
      }
    }
      ~~~~ 통신 코드
    }
   fetchData();
  },[fetchFn])
  
  // 그리고 state 값들을 리턴해주어서 해당 함수를 사용하는 컴포넌트에서 컨트롤 할 수 있게 한다.
  return {
    isFetching,error,fetchedData
  }
}

App.jsx

const {isFetching, error, fetchData} = useFetch(fetchUserPlaces);

커스텀 훅을 사용하여 리펙토링을 하여 재사용성을 높이고 코드를 깔끔하게 작성할 수 있다.