웹 개발/⚛️ React

React | useEffect

이재원 2024. 4. 21. 23:47

useEffect

useEffect는 쉽게말해

최초에 페이지가 렌더링되었을때 즉, 마운트되었을때

useState 애들이 상태변경되서 렌더링 되었을때

언마운트 되었을때

에 실행하는 함수라고보면된다

1.  마운트(최초렌더링), 이후 렌더링될때마다 실행

useEffect(()=>{

})

 

2. 마운트(최초렌더링), 특정 상태(state)가 변경됐을때만 실행

b가 변경되어서 렌더링 했든간에 

a가 변경되어 렌더링 되었을때만

uesEffect실행!

두번때 인자에 있는 배열의 이름은 Dependency Array

감시할 항목을 담는 역할

let [a,setA] = useState(0)
let [b,setB] = useState(1)
useEffect(()=>{

},[a])

 

3. 마운트(최초렌더링)될때 실행

useEffect(()=>{

},[])

 

4. 언마운트될때 실행

useEffect(()=>{

return()=>{
	//언마운트시 실행할 함수(화면에서 사라질때 실행)
}
},[]) //=> 처음 마운트될때만 실행
반응형