1-6. useEffect의 실행 순서

6. useEffect의 실행 순서에 대해 설명해주세요.

렌더링, 마운트 개념과 차이점 + 언마운트, useEffect, 클린업함수

1. 컴포넌트 렌더링 : useEffect 실행 전의 화면이 그려짐
   (초기 렌더링과 컴포넌트 마운트가 동시에 일어나는 시점)

2. useEffect 내의 콜백 함수 실행

3. useEffect의 두번째 매개변수인 의존성 배열 체크

4. 의존성 배열 안의 값이 변경되면 컴포넌트 리렌더링

5. useEffect 내용 재실행
   (이때 언마운트와 무관하게, 클린업 함수가 실행되고 새로운 값으로 useEffect 실행)

6. 컴포넌트 언마운트 시 클린업 함수 실행

➡️ 컴포넌트 마운트 시 set up 함수 호출, 그 이후 상태나 속성 변경 시 useEffect 실행, 변경 이전 값으로 clean up 함수 호출, 변경 이후 값으로 set up 함수 호출

🖥️ useEffect(() => {
  // 마운트 시 실행할 로직 (set up)
  console.log("컴포넌트가 마운트되었습니다.");

  return () => {
    // 언마운트 시 실행할 로직 (clean up)
    console.log("컴포넌트가 언마운트되었습니다.");
  };
}, []);

클린업 함수 : useEffect의 콜백 함수의 return 값으로 들어가는 함수. 언마운트 시 컴포넌트가 화면에 존재하지 않으므로 클린업 함수가 메모리 누수와 불필요한 동작을 방지해야 한다.

• 이벤트 리스너 제거
• 타이머 및 인터벌 정리
• 비동기 요청 취소
• Ref 객체 초기화

• https://velog.io/@jhsung23/React-useEffect-%EC%8B%A4%ED%96%89-%EC%88%9C%EC%84%9C
• https://hanghae99.spartacodingclub.kr/blog/react-%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91-%EC%98%88%EC%83%81%EC%A7%88%EB%AC%B8-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B02-18266