[React] useEffect

useEffect Hook

useEffect는 react에서 제공하는 훅으로, react 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 훅이다.

 

다음과 같이 사용한다.

import react, {useEffect} from "react";
...
useEffect(effect, deps);

 

useEffect 사용에는 무엇을 수행할 것인지(effect)를 정의하는 것이 필요하고, 상황에 따라 dependency(deps)의 설정도 필요하다.

effect는 필요할 때에만 실행되어야하기 때문에, dependency의 올바른 정의를 통해 불필요한 effect의 실행이나 무한루프의 문제를 방지할 수 있다.

 

 

 

> 랜더링이 될 때마다 실행되는 경우

useEffect(()=>{
    Axios.get('http://localhost:8000/post/postget').then((response)=>{
    setPlist(response.data);
  })

 

 

> 최초의 랜더링에만 실행되는 경우

useEffect(()=>{
    Axios.get('http://localhost:8000/post/postget').then((response)=>{
    setPlist(response.data);
  })
  },[])

 

 

> 특정 값의 변화가 있을 경우에만 실행되는 경우

useEffect(()=>{
    Axios.get('http://localhost:8000/post/postget').then((response)=>{
    setPlist(response.data);
  })
  },[plist])