[React] React Hooks - useEffect() 를 활용한 렌더링 관리.

React Hooks - useEffect() 를 활용한 렌더링 관리.

---

useEffect함수가 실행되는 4가지 경우에 대한 예시코드입니다.

1. Component가 Mount 될 때

useEffect(()=>{
  console.log('컴포넌트 마운트')
},[])

2. Component가 Unmount 될 때

useEffect(()=>{
  console.log('컴포넌트 마운트')
  // return -> 언마운트시 실행
  return console.log('컴포넌트 언마운트')
},[])

3. Componet가 Rerendering 될 때 마다

useEffect(()=>{
  // depth가 없는 경우 렌더링 될 때마다 실행된다.
  console.log('렌더링 될 때 마다 실행')
})

3. Component가 Update 될 때

useEffect(()=>{
  // deps에 특정 값을 넣게 될 경우,
  // 컴포넌트가 마운트 될 때,
  // 컴포넌트가 언마운트 될 때,
  // 값이 업데이트 될 때,
  // 값이 바뀌기 직전에 
  // 함수가 실행된다. 
  console.log('state가 업데이트 될 때 실행')
}, [state])