React.js / 01 / 기초 -6

✅ useEffect

• 컴포넌트가 랜더링 될 때마다, 특정 작업을 실행하는 Hook

• 컴포넌트 라이프사이클에 실행 되는 함수(기능)

• Mount 단계, Update 단계에서 작동
  = 랜더링 , 재랜더링

[📚] 라이프사이클(LifeCycle)

👉 컴포넌트에는 생명주기가 존재

컴포넌트가 실행되거나, 업데이트(재랜더링) 되거나, 삭제 될 때.
특정 이벤트가 발생


* Mount : 화면에 첫 렌더링
* Update : 업데이트 후 다시 렌더링(재랜더링) (예: setState 함수로 변경 값 출력시)
* UnMount : 화면에서 사라졌을때


🔴 useEffect = componentDidMount + componentDidUpdate

= Mount단계, Update단계에서 작동

= 랜더링, 재랜더링 

∴ 랜더링 될 때 실행되는 !!! 

[⭐] useEffect 조건 넣기

• 랜더링 마다 실행 되는 => useEffect
• 재랜더링 실행의 조건을 달아 줄 수 있음
• Dependency Array(의존성 배열)

🔴 useEffect

- 랜더링 + 재랜더링시 작동 되는 기능

- 처음 랜더링은 무조건 불변 실행 !!

- 그렇게 되면 비효율적 ( 작동 할 필요 없어도 작동 되니까)

∴ useEffect 작성 후,  [ ] <- 배열안에 변수 넣어서 특정 조건에만 재랜더링 되게 !!