[React] useEffect = 생명주기 동안에 발생하는 부수 효과를 수행하는 Hook

useEffect

• 컴포넌트가 마운트되었을 때, 업데이트되었을 때, 언마운트되었을 때 등 여러 시점에서 부수 효과를 실행할 수 있도록 함

function Post(){

  useEffect(()=>{
    (오래 걸리는 연산 코드)
  });
  
  return (
  ...생략
  )
}

• 이런 식으로 작성하면, html이 모두 렌더링이 되고 연산을 수행함 (useEffect 안에 적은 코드들은 html 렌더링 이후에 동작함)
• 재렌더링마다 코드 실행함.

 

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

• 둘째 파라미터로 [ ] 넣을 수 있음
  • 변수나 state를 넣는 곳인데, [ ] 내에 있는 변수나 state가 변할 때만 useEffect 안의 코드를 실행함.
• [ ] 에 아무것도 넣지 않으면, 그냥 마운트 될 때 딱 한번만 실행하고 또 실행하지 않음.

---

clean up function  : useEffect 동작 전 특정 코드 실행

useEffect(()=>{ 
  그 다음 실행 코드
  return ()=>{
    먼저 실행 코드
  }
})

• useEffect 코드가 실행 되기 전에 깔끔하게 실행해주고 싶을 때 활용이 되서 'clean up function'이라고 부름
• clean up function은 mount시에는 실행되지 않고, unmount시 실행됨.
• clean up function은 useEffect 안의 코드 실행 전에 항상 실행됨.

 

useEffect(()=>{ 
  그 다음 실행 코드
  return ()=>{
    먼저 실행 코드
  }
}, [])

• 여기서도 [ ] 을 추가하면 unmount시 clean up function가 딱 한번만 실행됨.

버그를 방지하기 위해서 활용, 타이머 제거, socket 연결요청 제거, ajax 중단 등 여러 곳에 활용할 수 있다.