[react 리액트] custom Hook 커스텀 훅을 만들어보자

 

1. 커스텀 훅을 왜 만들어?

1) 반복되는 훅이 있다면 매번 작성하는건 비효율적이다.
2) 관리가 용이하다. 만약 수정사항이 있다면 본체 하나만 바꾸면 된다.

 

 

 

2. 어떻게 만들어?

반복되는 걸 묶으면 되는데 상황이 다양하니 아래 예제를 살펴보자.

 

 

 

3. 예제

fetch로 API 호출하고 useEffrct, useState 로 호출된 값의 변화에 따라 새로운 값을 리턴해주는 하나의 모듈를 맹글어봐

 

 

1) 예를 들어, fetch()로 url에서 데이터를 받아 json으로 바꾸고  배열로 리턴해주는 반복되는 모듈이 있다고 하자.

 

 

 

2) 여기서 바뀌는 것은 url 뿐이니 url 을 받아 동일한 작업을 수행하는 모듈을 만들어보자.

- 커스텀 훅을 따로 관리하도록 폴더를 새로 파도 좋다.

- 컴포넌트 만드는 것과 동일한 방식으로 만들어준다.

- 본인은 hooks 라는 폴더를 새로 파서 훅의 이름은 useFetch 로 정했다.

 

* useEffect, useState 로 url 이 바뀔 때마다 감지하여 새로운 data를 리턴한다.

import { useEffect, useState } from "react";

export default function useFetch(url){

    const [data, setData] = useState([])

    useEffect(()=>{

        fetch(url)

        .then(res => {

            return res.json();

        })

        .then(_data => {

            return setData(_data);

        })

    },[url])

    return data;

}

 

 

 

4. 결과

길었던 코드를 단 한-두 줄로 줄였고 가벼워서 여기저기 붙이기 좋아졌다. 활동성이 좋아졌달까.