useEffect_TIL(46)

오늘 내일 비동기에 대해서 공부한 것을 정리해보려고 한다.

 

1.만난 문제

useEffect를 통해서 axios를 사용했지만 어렴풋이만 알고 확실히 알지 못해서 useEffect에 대한 오류가 났을 때 항상 곤란했었다.

그래서 이번에 확실히 정리하자 해서 공부를 시작했다.

 

2.useEffect?

자바스크립트는 동기적으로 즉 한번에 하나의 일만 진행을 시킨다. 그렇게 되면 연산이 오래걸리거나 서버로 부터 데이터를 가져와야 할때

시간이 오래걸릴 경우 html렌더링이 늦어지면서 사용자들이 불편함을 느낄 수가 있다.

그래서 useEffect를 사용해서 오래걸리는 로직들을 비동기적으로 처리를 할 수 있다.

 

3.사용법

 ㄱ.[ ]사용

let[alert,setAlert]=useState(true)

useEffect(()=>{
 setTimeOut(()=>{setAlert(false)},2000)
},[])   //[]의 역할은?🔥

[ ]:dependency라고 한다. useEffect 실행조건을 넣을 수 있는 곳

 1)state를 넣으면 mount + state변경시에만 useEffect안에있는 로직들이 실행된다.
 2)빈 배열 : mount시에만 실행된다, 즉 새로고침 또는 처음 한 번만 실행

 

ㄴ.return 사용

useEffect(()=>{
	setTimeOut(()=>{console.log('이제 출력')},2000)
    return ()=>{아무 코드나} 
 },[])

return을 사용하면 useEffect안에있는 코드가 실행하기 전에 먼저 실행이 된다.

이 return에 사용하는 코드를 clean up function이라고 하는데 mount시에는 실행되지 않고 unmount에 실행이 된다.

즉, 처음에 한번은 useEffect안의 코드가 실행이 된다는 것

 

4.얻은 점

axios get할때 왜 useEffect안에 넣어줬는지 이해가 갔다.

처음 페이지가 렌더링 됬을때 (mount) 값을 불러오기 위해서 사용할 수 있고 [ ]을 이용해서 한번만 렌더링 시 데이터를 받아올 수 있다는거

확실하게 알게 되었고 좀 더 코드를 짤 때 어떤 로직이 비동기로 실행되면 좋을 지 고민할 수 있는 폭이 넓어져서 좋았다.

 

내일은 async와 await에 대해서 정리를 해봐야겠다.