데이터를 가져오고 사용자 지정 후크를 만듭니다. 🪝

65778 단어 typescript100daysofcodereactwebdev
이 게시물의 목적은 React 및 사용자 지정 후크를 사용하여 HTTP GET 유형 요청을 만드는 방법을 가르치는 것입니다.

🚨 Note: This post requires you to know the basics of React (basic hooks and fetch requests).



어떤 종류의 피드백이든 환영합니다. 감사합니다. 기사를 즐기시기 바랍니다.🤗

목차.



📌 Technologies to use

📌 Creating the project

📌 First steps

📌 Making our first fetch

📌 Displaying API data on screen

📌 Creating a custom hook

📌 Improving the useFetch hook



📌Adding more components and refactoring

📍 Header.tsx

📍 Loading.tsx

📍 ErrorMessage.tsx

📍 Card.tsx

📍 LayoutCards.tsx





🚨 사용할 기술.

▶️ React JS (version 18)

▶️ Vite JS

▶️ TypeScript

 ▶️ Rick and Morty API

▶️ 바닐라 CSS (스타일은 이 게시물 끝에 있는 저장소에서 찾을 수 있습니다)

〽️ 프로젝트 생성.

npm init vite@latest

In this case we will name it: fetching-data-custom-hook (optional).

We will select React and then TypeScript.

Then we execute the following command to navigate to the directory just created.

cd fetching-data-custom-hook

Then we install the dependencies:

npm install

Then we open the project in a code editor (in my case VS code)

code .

 

〽️ 첫걸음.

Inside the src/App.tsx folder we delete all the contents of the file and place a functional component that displays a title and a subtitle.

const App = () => {
  return (
            <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
  )
}
export default App;


먼저 API에서 제공하는 JSON 응답에 포함된 속성을 자동 완성하는 데 도움이 되는 몇 가지 인터페이스를 생성합니다.
  • 첫 번째 인터페이스Response에는 결과 배열인 결과 속성이 포함되어 있습니다.
  • 두 번째 인터페이스Result에는 3개의 속성만 포함되어 있으며(더 많은 속성이 있지만 API의 문서를 확인할 수 있음) ID, 이름 및 캐릭터 이미지를 선택합니다.

    • interface Response {
  results: Result[]
}

interface Result {
  id: number;
  name: string;
  image: string;
}


    〽️ 첫 Fetch 만들기.

    1. First we add a state that is of type Result[] and the default value will be an empty array since we are not making the API call yet. This will serve us to store the API data and to be able to show them. 
    const App = () => {

  const [data, setData] = useState<Result[]>([]);

  return (
        <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
  )
}
export default App;
    1. In order to perform a data fetch, we have to do it in a useEffect , since we need to execute the fetch when our component is rendered for the first time.

    Since we need it to be executed only once, we place an empty array (i.e., without any dependencies).

    const App = () => {
  const [data, setData] = useState<Result[]>([]);

    useEffect(()=> {

    },[]) // arreglo vació

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
    </div>
  )
}
export default App;
    1. Inside the body of the useEffect function, the API call will be made, and as the useEffect does not allow us to use asynchronous code directly, we will make the call through promises in the meanwhile. 
    const [data, setData] = useState<Result[]>([]);

useEffect(()=> {
   fetch('<https://rickandmortyapi.com/api/character/?page=8>')
   .then( res => res.json())
   .then( (res: Response) => {})
   .catch(console.log)
},[])
    1. Once the promises are solved, we will obtain the data corresponding to the API, which we will place it to the state by means of the setData function.

    With this we could already display the data on the screen. 😌

    🚨 If something goes wrong with the API, the catch will catch the error and show it by console and the value of the state " data " remains as empty array (and at the end nothing will be shown but the title and subtitle of the app).

    const [data, setData] = useState<Result[]>([]);

useEffect(()=> {
   fetch('<https://rickandmortyapi.com/api/character/?page=8>')
   .then( res => res.json())
   .then( (res: Response) =>  {
      setData(res.results);
   })
   .catch(console.log)
},[])

     

    〽️ API 데이터를 화면에 표시합니다.

    Before displaying the API data, we need to do an evaluation. 🤔

    🔵 Only if the length of the " data " status value is greater than 0, we display the API data on screen.

    🔵 If the length of the " data " status value is less than or equal to 0, no data will be displayed on the screen, only the title and subtitle.

    const App = () => {
    const [data, setData] = useState<Result[]>([]);

    useEffect(()=> {
       fetch('<https://rickandmortyapi.com/api/character/?page=8>')
       .then( res => res.json())
       .then( (res: Response) =>  {
          setData(res.results);
       })
       .catch(console.log)
    },[])

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && <p>data</p>
      }
    </div>
  )
}
export default App;

    Now, once we have confirmed that we do have data in the " data " state value, we will proceed to display and shape the data.

    Using the map function used in arrays. We will traverse the array of the value of the state " data " and we will return a new JSX component that in this case will only be an image and a text.

    🔴 NOTE: the key property inside the div, is an identifier that React uses in the lists, to render the components in a more efficient way. It is important to set it.

    const App = () => {
    const [data, setData] = useState<Result[]>([]);

    useEffect(()=> {
       fetch('<https://rickandmortyapi.com/api/character/?page=8>')
       .then( res => res.json())
       .then( (res: Response) =>  {
          setData(res.results);
       })
       .catch(console.log)
    },[])

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && data.map( ({ id, image, name }) => (
          <div key={id}>
            <img src={image} alt={image} />
            <p>{name}</p>
          </div>
        ))
      }
    </div>
  )
}
export default App;

    In this way we have finished fetching data and displaying it correctly on the screen. But we can still improve it. 😎

    〽️ 사용자 지정 후크 만들기.

    Inside the folder src/hook we create a file named useFetch .

    We create the function and cut the logic of the App.tsx component.

    const App = () => {

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && data.map( ({ id, image, name }) => (
          <div key={id}>
            <img src={image} alt={image} />
            <p>{name}</p>
          </div>
        ))
      }
    </div>
  )
}
export default App;

    We paste the logic inside this function, and at the end we return the value of the state " data ."

    export const useFetch = () => {
  const [data, setData] = useState<Result[]>([]);

  useEffect(()=> {
     fetch('<https://rickandmortyapi.com/api/character/?page=8>')
     .then( res => res.json())
     .then( (res: Response) =>  {
        setData(res.results);
     })
     .catch(console.log)
  },[]);

  return {
    data
  }
}

    Finally, we make the call to the useFetch hook extracting the data.

    And ready, our component is even cleaner and easier to read. 🤓

    const App = () => {

  const { data } = useFetch();

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && data.map( ({ id, image, name }) => (
          <div key={id}>
            <img src={image} alt={image} />
            <p>{name}</p>
          </div>
        ))
      }
    </div>
  )
}
export default App;

    But wait, we can still improve this hook. 🤯
     

    〽️ useFetch 후크 개선.

    Now what we will do is to improve the hook, adding more properties.

    To the existing state we will add other properties and this new state will be of type DataState .

    interface DataState {
    loading: boolean;
    data: Result[];
    error: string | null;
}

    loading, boolean value, will let us know when the API call is being made. By default the value will be set to true.

    error, string or null value, it will show us an error message. By default the value will be null.

    data, value of type Result[] , will show us the API data. By default the value will be an empty array.

    🔴 NOTE: the properties of the estate have just been renamed.

    🔵 data ➡️ dataState

    🔵 setData ➡️ setDataState

    export const useFetch = () => {
    const [dataState, setDataState] = useState<DataState>({
      data: [],
      loading: true,
      error: null
  });

  useEffect(()=> {
     fetch('<https://rickandmortyapi.com/api/character/?page=8>')
     .then( res => res.json())
     .then( (res: Response) =>  {
        setData(res.results);
     })
     .catch(console.log)
  },[]);

  return {
    data
  }
}

    Now we will take out the useEffect logic in a separate function. This function will have the name handleFetch .

    We will use useCallback , to store this function and prevent it from being recreated when the state changes.

    The useCallback also receives an array of dependencies, in this case we will leave it empty since we only want it to be generated once.

    const handleFetch = useCallback(
    () => {},
    [],
)

    The function that receives in useCallback , can be asynchronous so we can use async/await..

    1. First we place a try/catch to handle errors.
    2. Then we create a constant with the URL value to make the API call.
    3. We make the API call using fetch and send the URL (the await will allow us to wait for a response either correct or wrong, in case of error, it would go directly to the catch function). 
    const handleFetch = useCallback(
      async () => {
          try {
                            const url = '<https://rickandmortyapi.com/api/character/?page=18>';
              const response = await fetch(url);
          } catch (error) {}
        },
        [],
    )
    1. Then we evaluate the response, if there is an error then we activate the catch and send the error that the API gives us.
    2. In the catch, we are going to set the state. We call the setDataState, we pass a function to obtain the previous values (prev). We return the following.
      1. We spread the previous properties (...prev), which in this case will only be the value of the data property, which will end up being an empty array.
      2. loading, we set it to false.
      3. error, we caste the value of the parameter error that receives the catch to be able to obtain the message and to place it in this property. 
    const handleFetch = useCallback(
      async () => {
          try {
                            const url = '<https://rickandmortyapi.com/api/character/?page=18>';
              const response = await fetch(url);

              if(!response.ok) throw new Error(response.statusText);

          } catch (error) {

              setDataState( prev => ({
                  ...prev,
                  loading: false,
                  error: (error as Error).message
              }));
          }
        },
        [],
    )
    1. If there is no error from the API, we get the information, and set the status in a similar way as we did in the catch.
    2. We call the setDataState, pass it a function to get the previous values (prev). We return the following.
      1. We spread the previous properties (...prev), which in this case will only be the value of the error property that will end up being a null.
      2. loading, we set it to false.
      3. data, will be the value of the dataApi counter by accessing its results property. 
    const handleFetch = useCallback(
      async () => {
          try {
                            const url = '<https://rickandmortyapi.com/api/character/?page=18>';
              const response = await fetch(url);

              if(!response.ok) throw new Error(response.statusText);

              const dataApi: Response = await response.json();

              setDataState( prev => ({
                  ...prev,
                  loading: false,
                  data: dataApi.results
              }));

          } catch (error) {

              setDataState( prev => ({
                  ...prev,
                  loading: false,
                  error: (error as Error).message
              }));
          }
        },
        [],
    )

    After creating the handleFetch function, we return to the useEffect to which we remove the logic and add the following.

    We evaluate if the value of the state "dataState" by accessing the data property, contains a length equal to 0, then we want the function to be executed. This is to avoid calling the function more than once.

    useEffect(() => {
    if (dataState.data.length === 0) handleFetch();
}, []);

    And the hook would look like this:

    🔴 NOTE: at the end of the hook, we return, using the spread operator, the value of the "dataState" state.

    🔴 NOTE: the interfaces were moved to their respective folder, inside src/interfaces.

    import { useState, useEffect, useCallback } from 'react';
import { DataState, Response } from '../interface';

const url = '<https://rickandmortyapi.com/api/character/?page=18>';

export const useFetch = () => {

    const [dataState, setDataState] = useState<DataState>({
        data: [],
        loading: true,
        error: null
    });

    const handleFetch = useCallback(
        async () => {
            try {
                const response = await fetch(url);

                if(!response.ok) throw new Error(response.statusText);

                const dataApi: Response = await response.json();

                setDataState( prev => ({
                    ...prev,
                    loading: false,
                    data: dataApi.results
                }));

            } catch (error) {

                setDataState( prev => ({
                    ...prev,
                    loading: false,
                    error: (error as Error).message
                }));
            }
        },
        [],
    )

    useEffect(() => {
        if (dataState.data.length === 0) handleFetch();
    }, []);

    return {
        ...dataState
    }
}

    Before using the new properties of this hook, we will do a refactoring and create more components. 😳
     

    〽️ 구성 요소 추가 및 리팩토링.

    The first thing is to create a components folder inside src..

    Inside the components folder we create the following files.
     

    🟡 헤더.tsx

    Inside this component will be only the title and the subtitle previously created. 😉

    export const Header = () => {
    return (
        <>
            <h1 className="title">Fetching data and create custom Hook</h1>
            <span className="subtitle">using Rick and Morty API</span>
        </>
    )
}

     

    🟡 Loading.tsx

    This component will only be displayed if the loading property of the hook is set to true. ⏳

    export const Loading = () => {
  return (
    <p className='loading'>Loading...</p>
  )
}


    🟡 ErrorMessage.tsx

    This component will only be displayed if the error property of the hook contains a string value. 🚨

    export const ErrorMessage = ({msg}:{msg:string}) => {
  return (
    <div className="error-msg">{msg.toUpperCase()}</div>
  )
}


    🟡 카드.tsx

    Displays the API data, that is, the image and its text. 🖼️

    import { Result } from '../interface';

export const Card = ({ image, name }:Result) => {

    return (
        <div className='card'>
            <img src={image} alt={image} width={100} />
            <p>{name}</p>
        </div>
    )
}

     

    🟡 LayoutCards.tsx

    This component serves as a container to do the traversal of the data property and display the letters with their information. 🔳

    🔴 NOTE: we use memo, enclosing our component, in order to avoid re-renders, which probably won't be noticed in this application but it's just a tip. This memo function is only re-rendered if the "data " property changes its values.

    import { memo } from "react"
import { Result } from "../interface"
import { Card } from "./"

interface Props { data: Result[] }

export const LayoutCards = memo(({data}:Props) => {
    return (
        <div className="container-cards">
            {
                (data.length > 0) && data.map( character => (
                    <Card {...character} key={character.id}/>
                ))
            }
        </div>
    )
})

    This is how our App.tsx component would look like.

    We create a function showData, and we evaluate:

    • If the loading property is true, we return the <Loading/> component.
    • If the error property is true, we return the component <ErrorMessage/> , sending the error to the component.
    • If none of the conditions is true, it means that the API data is ready and we return the <LayoutCards/> component and send it the data to display.

    Finally, below the component, we open parentheses and call the showData function.

    import { ErrorMessage, Header, Loading, LayoutCards } from './components'
import { useFetch } from './hook';

const App = () => {

  const { data, loading, error } = useFetch();

  const showData =  () => {
    if (loading) return <Loading/>
    if (error) return <ErrorMessage msg={error}/>
    return <LayoutCards data={data} />
  }

  return (
    <>
      <Header/>
      { showData() }
    </>
  )
}
export default App;

    🔴 NOTE: You can also move the showData function to the hook, and change the hook file extension to .tsx , this is because JSX is being used when returning various components.

    Thanks for getting this far. 🙌

    I leave the repository for you to take a look if you want. ⬇️

    프랭클린361 / 가져오기-데이터-사용자 지정-후크


    데이터를 가져오고 사용자 지정 후크를 만드는 방법에 대한 자습서





    데이터 가져오기 및 사용자 지정 후크 만들기


    데이터를 가져오고 사용자 지정 후크를 만드는 방법에 대한 자습서
    demo
    튜토리얼 게시물 링크 ➡️


    View on GitHub
    Digispark에서 AnalogRead~GP2Y0A21YK 사용~
    웹 스크래핑 튜토리얼 - Chrome 확장 프로그램이 있는 Elixir API 서버

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage