[React] - useEffect

useEffect는 Hook이다.

useEffect(()=>{}) 간단한 동작 원리
1. html 전부 렌더링 후에 useEffect 안에 있는 코드가 실행된다.
즉 복잡한 연산 같은 걸 useEffect에 넣으면 html 먼저 실행 한 후에 복잡한 연산은 뒤에서 해준다.
그래서 useEffect를 사용하면 html 동작들이 전체적으로 빨라진다.
2. 서버에서 데이터를 가져오는 과정
3. 타이머 사용할 때

타이머를 사용할 때의 예시

useEffect는 html이 전부 실행이 된 후에 실행이 되는데
hook 안에 return()=>{}은 useEffect가 실행되기 직전에 먼저 실행된다.

버튼을 클릭할 때 계속적으로 렌더링이 되는데 그때마다 새로운 타이머가 생성되어 속도가 느려지게 된다.

그것을 방지하기 위해 return()=>{ clearTimeout(timer) }를 사용하여 초기화 후 새롭게 타이머를 생성해서 늦어지게 되는 것을 방지할 수 있다.

빡통식 정리

1. useEffect(()=>{ })

재렌더링마다 코드 실행하고 싶을 때

2. useEffect(()=>{},[변수])

mount(컴포넌트 실행) 할 때 1회 코드 실행하고 싶을 때 // 변수 사용 시 특정 state가 변경 시에만 실행할 때

3. useEffect(()=>{
   return()=>{}
   },[])

unmount 시 실행하고 싶을 때