useEffect

컴포넌트의 Lifecycle

• mount
  페이지에 장착 (컨포넌트가 페이지에 보일 때)
  
  
• update
  업데이트 (컨포넌트를 조작해서 수정될 때_ 즉, 재렌더링)
  
  
• unmount
  필요없으면 제거 (다른 페이지로 가서 컨포넌트가 안 보일 때)
  
  

중간중간에 간섭 가능(중간에 코드 실행 가능)

 

사용하는 이유?

useEffect 안에 있는 코드는 html 렌더링 후에 동작함
그래서 useEffect 안에는
어려운 연산, 서버에서 데이터가져오는 작업, 타이머 장착 등의 코드를 적음

 

정리

• 재렌더링마다 코드를 실행가능합니다.

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

• 컴포넌트 mount시 (로드시) 1회만 실행가능합니다.

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

• useEffect 안의 코드 실행 전에 항상 실행됩니다.

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

• 컴포넌트 unmount시 1회 실행됩니다.

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

• 특정 state 변경될 때만 실행됩니다.

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