본문 바로가기

React/react 기초 공부하기

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

 

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

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

 

React LifeCycle

컴포넌트 생성 constructor (생성, setState 사용X), -> componentWillMount(렌더 되기전) -> render(그리는경우, setState 사용X) -> componentDidMount(렌더가 그려졌을때) 컴포넌트 제거 componentWillUnmount..

loy124.tistory.com

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;

 

 

 

 

'React > react 기초 공부하기' 카테고리의 다른 글

react styled-components 사용해보기  (0) 2020.06.16
redux 공부 하기(순수 리덕스만 사용해보기)  (0) 2020.06.14
react setState와 useState 비교하기  (0) 2020.05.18
react setState  (0) 2020.05.18
React LifeCycle  (0) 2020.05.18