분류 Reactjs

React Hooks로 데이터를 가져 오는 방법은 무엇입니까?(2)

컨텐츠 정보

  • 조회 375 (작성일 )

본문

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ hits: [] });

  useEffect(async () => {
    const result = await axios(
      'https://hn.algolia.com/api/v1/search?query=redux',
    );

    setData(result.data);
  });

  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

export default App;


useEffect라는 효과 후크는 API에서 axios로 데이터를 가져오고 상태 후크의 업데이트 기능을 사용하여 구성 요소의 로컬 상태로 데이터를 설정하는 데 사용됩니다. 약속 해결은 async / await에서 발생합니다.


그러나 응용 프로그램을 실행하면 불쾌한 루프가 발생합니다. 구성 요소가 마운트 될 때뿐만 아니라 구성 요소가 업데이트 될 때 효과 후크가 실행됩니다. 모든 데이터 페치 후에 상태를 설정하기 때문에 구성 요소가 업데이트 되고 효과가 다시 실행됩니다. 데이터를 계속해서 가져옵니다. 그것은 버그이며 피해야 합니다. 컴포넌트가 마운트 될 때만 데이터를 가져오고 싶습니다. 그렇기 때문에 구성 요소 업데이트시 활성화하지 않고 구성 요소를 마운트 하는 경우에만 효과 후크에 두 번째 인수로 빈 배열을 제공 할 수 있습니다.


import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ hits: [] });

  useEffect(async () => {
    const result = await axios(
      'https://hn.algolia.com/api/v1/search?query=redux',
    );

    setData(result.data);
  }, []);

  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

export default App;



두 번째 인수는 후크가 의존하는 모든 변수 (이 배열에 할당)를 정의하는 데 사용할 수 있습니다. 변수 중 하나가 변경되면 후크가 다시 실행됩니다. 변수가 있는 배열이 비어 있으면 변수를 볼 필요가 없으므로 구성 요소를 전혀 업데이트 할 때 후크가 실행되지 않습니다.






React Hooks