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

ys5133님의 프로필 이미지
ys5133

작성한 질문수

Next.js 시작하기

장바구니 목록 데이터 갱신 기능 구현

router를 사용할 때 왜 페이지가 갱신되는지에 대한 질문

해결된 질문

작성

·

113

1

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

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

 

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

  1. CartListCartPage의 자식 컴포넌트이다.

  2. CartPagegetServerSideProps로 서버에서 받아온 데이터를 프롭스(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. 현재 CartListCartPage의 자식 컴포넌트이다.

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

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

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

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

     

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

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

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

    이렇게 이해하면 될까요?

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

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

답변 2

0

안녕하세요, 제가 답변이 조금 늦었네요 🙂 네 마지막에 정리해주신 플로우가 맞습니다. getServerSideProps 함수 자체가 목적이 페이지 컴포넌트에 프롭스를 주입하는 거예요. 그래서 현재 URL을 재방문해서 메서드를 새로 실행하게 만들었습니다. 참고하세요 :)

0

안녕하세요, 인프런 AI 인턴입니다.

ys5133님,

질문해주신 내용을 잘 이해하셨습니다. router.replace(router.asPath) 로 페이지를 다시 방문하는 로직을 통해 getServerSideProps가 호출되고, 새로운 데이터를 기반으로 컴포넌트가 리렌더링됩니다. 요약하자면:

  1. router.replace 또는 router.push를 사용할 때 Next.js는 해당 페이지의 서버 사이드 프롭스(getServerSideProps)를 다시 가져와 실행합니다.
  2. getServerSideProps가 다시 실행되고 갱신된 데이터를 받아 컴포넌트의 프롭스로 전달합니다.
  3. 전달된 프롭스가 변경되면 해당 프롭스를 사용하는 자식 컴포넌트들도 리렌더링됩니다.
  4. 따라서 새로운 데이터를 반영한 화면이 사용자에게 보여집니다.

말씀하신 마지막 질문에 대한 답변입니다:

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

네, 맞습니다. getServerSideProps가 재실행되면 해당 페이지 컴포넌트는 새로운 프롭스를 받아 자동으로 리렌더링됩니다. 이는 Next.js가 서버에서 가져온 데이터를 항상 최신 상태로 유지하도록 하는 메커니즘입니다.

자세한 정보는 업데이트된 Next.js 공식 문서에서 확인하실 수 있습니다:
Next.js 공식 문서 - getServerSideProps

추가 질문이 있으시면 언제든지 말씀해 주세요. 면접 준비 잘 하시길 바랍니다!

감사합니다.

ys5133님의 프로필 이미지
ys5133

작성한 질문수

질문하기