useEffect

• 컴포넌트 생명주기 이벤트를 등록하기 위한 훅
• 클래스 기반 컴포넌트에서는 componentDidMount(),componentDidUpdate(),componentWillUnmount() 메소드를 오버라이드 해서 구현해야 함
• 함수 컴포넌트에서는 useEffect에서 구현 가능
• useEffect에서 주로 구현하는 기능
  • 컴포넌트의 렌더링 작업 외의 부가적인 작업
    • 타이머 설정
    • 로깅
  • 컴포넌트의 렌더링 이후에 처리할 작업
    • DOM 수동 조작
  • side effect가 발생하는 작업(컴포넌트를 순수 함수로 유지)
    • 데이터 fetching

useEffect(setup, dependencies?);

• setup : 컴포넌트가 마운트, 업데이트, 제거 될 때 호출되는 함수로
  • setup 이 함수를 리턴하면, 리턴한 함수를 cleanup 이라고 부르며, 컴포넌트가 업데이트되거나 언마운트 될 때 호출됨(이전 effect의 cleanup이 먼저 실행되고 setup이 뒤에 실행됨)
  • setup 함수
    • 컴포넌트가 마운트될 때 실행
    • 의존성 값이 변경되면 업데이트 시 다시 실행
    • effect에서 시작해야 할 작업을 작성하는 부분
    예)
    • 이벤트 리스너 등록
    • 타이머 설정
    • 구독 시작
  • cleanup 함수
    • setup 함수가 리턴한 함수
    • setup에서 해둔 작업을 정리(원상복구) 하는 역할
    • 실행 시점
      • 업데이트 시: 다음 setup이 실행되기 직전
      • 언마운트 시: 컴포넌트가 사라질 때

마운트:
→ effect 실행

count 변경 (업데이트):
→ cleanup
→ effect 실행

언마운트: // 의존성 배열이 [] 빈 배열 일 때 
→ cleanup

• dependencies (선택) : 의존 객체 배열
  • 컴포넌트가 업데이트될 때 setup 함수를 호출할지 말지 여부를 결정하는데 사용
  • 컴포넌트가 마운트될 때는 dependecies 여부와 상관없이 setup 이 호출됨
  • dependencies 를 생략하면, 컴포넌트가 업데이트될 때 항상 setup이 호출됨
  • dependencies 에 빈 배열을 지정하면, 컴포넌트가 업데이트 될 때 호출되지 않음 (최초 마운트 시에만 호출)
  • dependencies 를 지정하면, 컴포넌트가 업데이트 될 때 지정한 값 중 하나라도 수정되었을 경우에만 setup 함수가 호출됨

의존성 배열이 없을 경우 무한 반복이 될 가능성이 크지만, 항상 그렇지는 않다.
→ 정확하게는 렌더링 될 때마다 effect가 실행된다.