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

안녕하세요.
면접준비에 도움이 될 거 같고 개념적으로도 궁금해서 질문드립니다.

장바구니에서 삭제를 하면 갱신되는데에 동작원리에서

처음엔 router.replace(router.asPath) 때문에 url이 변경되진 않아도 단순하게 /cart로 이동이란 동작을 해서 페이지를 다시 그린다고 생각했습니다.

1. CartList는 CartPage의 자식 컴포넌트이다.

2. CartPage는 getServerSideProps로 서버에서 받아온 데이터를 프롭스(carts)로 받으며, 그 프롭스를 CartList에게 전달해주고 있다.

3. CartList는 부모컴포넌트에게 받은 carts 프롭스를 통해 장바구니 목록을 보여주고 있다.

4. 장바구니에서 상품을 삭제하면, 선택한 상품을 서버에서 삭제하고

   router.replace를 통해(router.push도 동일) 현재 페이지(asPath)인 /cart로 이동한다.

5. /cart 페이지(즉, CartPage.jsx)가 리렌더링된다.

6. 리액트는 리렌더링되면 컴포넌트의 모든 코드를 다시 실행하게 된다.(고 알고 있습니다.)

7. 그로 인해 getServerSideProps가 다시 실행되고 갱신된(장바구니에서 상품을 삭제한) 데이터를 다시 CartPage에게 프롭스로 내려주게 된다.

8. 프롭스가 변경됐으니 자식 컴포넌트인 CartList도 리렌더링되어 모든 코드가 다시 실행된다.

9. 바뀐 장바구니 데이터로 보여지게 된다.

라고 생각했는데요.

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props#behavior

공식문서를 살펴보니 사용자가 Link 컴포넌트 또는 router를 통해 페이지를 방문할 때, Next.js는 서버에 API 요청을 보내 getServerSideProps를 실행합니다. 라고 되어있습니다.

이러면,

1. 현재 CartList는 CartPage의 자식 컴포넌트이다.

2. CartPage는 getServerSideProps로 서버에서 받아온 데이터를 프롭스(carts)로 받으며, 그 프롭스를 CartList에게 전달해주고 있다.

3. CartList는 부모컴포넌트에게 받은 carts 프롭스를 통해 장바구니 목록을 보여주고 있다.

4. 장바구니에서 상품을 삭제하면, 선택한 상품을 서버에서 삭제한다.

5. router.replace를 통해(router.push도 동일) 현재 페이지(asPath)인 /cart로 이동한다.

    

6. router를 통해 페이지를 방문했으므로 CartPage의 getServerSideProps가 다시 실행되고 갱신된 데이터를 CartPage에게 프롭스로 내려주게 된다.

7. 프롭스가 변경됐으니 자식 컴포넌트인 CartList도 리렌더링되어 모든 코드가 다시 실행된다.

8. 바뀐 장바구니 데이터로 보여지게 된다.
   
   이렇게 이해하면 될까요?
   

   그리고, getServerSideProps가 있는 페이지 컴포넌트는 getServerSideProps가 재실행되면 자동으로 리렌더링되게 되는 구조인가요?

설명해주셨는데 제가 놓친거면 죄송합니다.