코드가 실행되면 어떻게 비동기화가 진행되고 다시 if문이 실행되는거죠?

실제로 react에서 rendering이 발생하면 코드를 처음부터 끝까지 읽게 됩니다.
네트워크 통신은 기본적으로 비동기 처리이기 때문에 네트워크 요청이 끝난 후&nbsp; 끝까지 코드가 불립니다. 그때는 저 조건문에 걸려 로딩중 표시가 됩니다. 그리고 비동기 처리가 끝나고 setProduct가 다시 불리게 되면 state의 변화가 생겼기에 다시 렌더링이 발생하고 코드가 실행됩니다. 그때는 product가 null이 아니기 떄문에 정상적으로 아래 return 코드가 불립니다~!

인프런 커뮤니티 질문&답변

if (product == null) { return <h1>상품 정보 로딩중</h1>; }