class 기반 React에서는 lifeCycle 메소드들을 통해 관리하지만
https://loy124.tistory.com/230?category=784079
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 |