✨React - useEffect Hook
- 컴포넌트가 마운트 됐을 때 (처음 나타났을 때)
- 언마운트 됐을 때 (사라질 때)
- 업데이트 될 때 (특정 props가 바뀔 때)
🌱마운트로 하는 작업
- props 로 받은 값을 컴포넌트의 로컬 상태로 설정
- 외부 API 요청 (REST API 등)
- 라이브러리 사용 (D3, Video.js 등...)
- setInterval 을 통한 반복작업 /setTimeout 을 통한 작업 예약
🌱언마운트로 하는 작업
- setInterval, setTimeout으로 등록한 작업들 clear하기(clearInterval, clearTimeout)
- 라이브러리 인스턴스 제거
useEffect
- 첫번째 파라미터: 함수
- 두번째 파라미터: 의존값이 들어있는 배열 (deps)
📌deps 배열을 비우게 될 경우, useEffect에 등록한 함수는
컴포넌트가 처음 나타날 때만 호출됨
📌 deps 에 특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 되거나, 지정한 값이 바뀔 때 모두 호출됨- cleanup함수: useEffect에서 deps가 비어있는 경우, 컴포넌트가 사라질 때 cleanup함수가 호출됨
✨useEffect 안에서 사용하는 상태 / props 가 있을 경우, useEffect 의 deps에 넣어주는 게 원칙!
=> 그렇지 않을 경우, useEffect 에 등록한 함수가 실행 될 때 최신 상태/props를 가르키지 않게 됨
