[React] 훅 호출 순서

렌더 시작 → 상태변경 → 사이드이펙트 (필요시)

🎈 첫 Render

• App : 렌더 시작
• App : useState 생성
• App : useEffect 실행

🎈 Side-Effect 발생 (조건 충족) 시

• App : 렌더 시작
• App : 상태 변경 함수 실행
• App : useEffect 클린업
• App : 상태 값 실제로 변경
• App : useEffect 실행

🎈 자식 컴포넌트에서 Side-Effect 발생 시

• App : 렌더 시작
• App : 상태 변경
  • Child : 렌더 시작
  • Child : 상태 변경
• App : useEffect 클린업
  • Child : useEffect 클린업
  • Child : useEffect 실행
• App : useEffect 실행

🎈 리렌더 되는 조건

• 컴포넌트 자신의 state가 변할 때
• 부모 컴포넌트로부터 받는 props가 변할 때
• 부모 컴포넌트가 리렌더링 될 때