useEffect + axios를 활용하여 API 호출하기

 

class 기반 React에서는 lifeCycle 메소드들을 통해 관리하지만 

https://loy124.tistory.com/230?category=784079

React LifeCycle

react hooks 기반에서는 useEffect를 사용해서 lifeCycle을 관리한다. 

 

useEffect는 omponentDidMount와 componentDidUpdate, componentWillUnmont 세가지 역할을 하는데 

 

초기에 component가 mount 되자마자 내부 로직을 한번 실행하기때문에 componentDidMount의 역할을 한다.

 

useEffect에는 

 useEffect(() => {
    console.log("useEffect를 활용한 componentDidMount");
  });

인자를 아에 넣지않고 생략해버리면 dom이변화할때마다 무조건적으로 해당 useEffect를 실행한다. 

 

useEffect(() => {
    console.log("useEffect를 활용한 componentDidMount");
  }, []);

식으로 마지막부분에 인자를 붙여 넣을수 있는데 해당 인자를 []로 해두면 한번만 실행하고 스테이트가 변하더라도 해당 함수를 실행하지 않는다.

(안에 변수를 넣으면 해당 변수가 변화할때마다 useEffect를 실행한다) 

 

 

 

useEffect의 return 부분에 로직을 넣게되면 컴포넌트가 unMount될떄 실행되는 로직 

componentWillUnmount가 수행이된다.

useEffect(() => {
    console.log("useEffect를 활용한 componentDidMount");
    
      return () => {
      console.log("end");
    }
  }, []);

 

 

 

 

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

const App = () => {
  const [data, setData] = useState({ hits: [] });
  const [query, setQuery] = useState("react");

  //useEffect는 비동기적으로 동작
  useEffect(() => {
    let completed = false; //초기에는 실행해야 되기때문에 false flag 변수

    //query를 리턴하는 함수를 result에 할당
    async function get() {
      const result = await axios.get(
        `https://hn.algolia.com/api/v1/search?query=${query}`
      );
      if (!completed) setData(result.data);
    }
    get();
    return () => {
      completed = true;
    };
    //query가 변할때 useEffect를 실행해야하는 시점이다
  }, [query]); //input에 값이 변경이 되었을때 effect를 실행한다
  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul>
        {data.hits.map((item) => (
          <li key={item.objectID}>
            <a target="_blank" href={item.url}>
              {item.title}
            </a>
          </li>
        ))}
      </ul>
    </>
  );
};

export default App;