[TIL] 0109

api로 데이터를 불러왔을 경우의 부모-자식 컴포넌트 간 렌더링 과정이 이해가 가지 않았는데
다른 할일이 많아서 넘겼다가 주말인 김에 알아보았다.
리액트 라이프사이클 개념을 서치해서 자료를 찾아보았지만 내가 궁금했던 점이 명쾌하게 해결되지 않아서 직접 콘솔을 찍어보았다.

contextApi의 영향과 알 수 없는 이유로 재렌더링이 몇 번되기 했지만 그런 점들을 제외하자면
나는 이렇게 이해했다.

부모 컴포넌트 (EditSeriesPage)

• 초기 상태로 첫 렌더링
• useEffect실행
• useEffect안에서 실행된 함수인 getInitialData 실행
  • getInitialData함수: Api함수인 getSeriesDetail의 실행이 완료되기 기다렸다가
    받은 데이터로 state를 바꿔줌
• state가 바뀌었으므로 재렌더링

자식 컴포넌트 (SeriesForm)

• 위의 부모 컴포넌트의 로직이 모두 실행 된 후 초기 상태로 첫 렌더링
• useEffect실행: props으로 받은 데이터로 state변경
• state가 바뀌었으므로 재렌더링

부모 컴포넌트가 렌더링 될 때 자식 컴포넌트까지 실행되는 줄 알았는데
첫 렌더링 - useEffect실행 - (useEffect에 상태 변화 로직이 있다면) 재렌더링
과정까지 전부 마치고 나서 자식 컴포넌트가 실행되었다.
아마 첫 렌더링에서 자식 컴포넌트 생성 함수가 콜백으로 쌓였다가 위의 적은 부모 컴포넌트의 과정들이 전부 마무리 되고 나서 실행되는게 아닐까 생각한다.

React lifecycle Hooks Diagram