인프런 커뮤니티 질문&답변
작성한 질문수
렌더링질문
해결된 질문
작성
·
168
1
강의 12:13 부분에서 setProducts(products)로 인해서 products가 업데이트됐고, state업데이트되서 다시 렌더링이 일어나는 구조가 계속 반복되는데
Q1 ) 코드가 다시 렌더링 일어날 때, function MainPage() 함수의 처음부분 const [products, setProducts] = React.useState([]); 부터 맨 끝까지 업데이트가 되는건가요?
Q2) 강의에서 setProduct부분에서 다시 렌더링이 반복된다고 했는데
처음부터 setProducts(product)부분까지만 반복되고 맨 위로 다시 가는 구조라면, 아래 부분 코드-이미지들이 어떤 구조로 출력되는건가요?
답변 1
1
그랩
지식공유자
렌더링에서 state를 선언되는 부분은 재실행되지 않습니다! react에서 내부적으로 요건 재실행이 안되게 처리를 해둔다고 보시면 됩니다.
처음에 setProducts가 호출되려면 network 요청이 끝난 이후에 동작하게 됩니다(앞에서 배웠던 비동기 처리). 그리고 네트워크 요청이 처리되는 동안 return 구문이 먼저 호출되게 됩니다. 그리고 setProducts가 다시 된 후 state가 변경되면 products가 업데이트된 상태로 return쪽이 다시 호출되면서 화면이 업데이트된다고 보시면 됩니다!
답변감사합니다