[React] Component의 Lifecycle과 useEffect (2)

useEffect에 넣을 수 있는 실행조건 

 

useEffect(()=>{ 실행할코드 }, [count])

 

• useEffect()의 둘째 파라미터로 [ ]를 넣을 수 있는데 이것을 dependency라고 한다.
• []에 변수나 state같은 것들을 넣을 수 있다.
• 그렇게 하면 [ ]에 있는 변수나 state가 변할 때만 useEffect 안의 코드를 실행해준다.
• 그래서 위의 코드는 count라는 변수가 변할 때만 useEffect 안의 코드가 실행된다. 

 

useEffect(()=>{ 실행할코드 }, [])

 

-> 아무것도 안넣으면 mount시( 로드시) 1회 실행하고 더이상 실행해주지 않는다.

---

clean up function

 

useEffect 동작하기 전에 특정코드를 실행하고 싶으면 return ()=>{} 안에 넣을 수 있다.

useEffect(()=>{ 
  그 다음 실행됨 
  return ()=>{
    여기있는게 먼저실행됨
  }
}, [count])

 

• count라는 변수의 값이 변할 때 useEffect 안에 코드를 실행하기 전에 return ()=>{}안에 코드를 먼저 실행해준다.
• 이 기능을 clean up function이라고 부른다.
• (참고1) clean up function에는 타이머제거, socket 연결요청제거, ajax요청 중단 이런 코드를 많이 작성한다.
• (참고2) 컴포넌트 unmount 시에도 clean up function 안에 있던게 1회 실행된다.

---

요약 정리

 

useEffect(()=>{ 실행할코드 })

-> 렌더링할 때 마다 코드를 실행

 

useEffect(()=>{ 실행할코드 }, [])

-> 컴포넌트 mount시 (로드시) 1회만 실행

 

useEffect(()=>{ 
  실행할코드
}, [state1])

-> state1 변수의 값이 변경될 때만 실행

 

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
})

-> useEffect 안의 코드 실행 전에 return () => {} 코드 먼저 실행

 

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
}, [])

-> 컴포넌트 unmount시 1회 실행